Change Details

{F4487514} Improved color palette as of September 2016, compliant to WCAG 2.0 level AA --- Find a palette that complies with the below listed criteria while staying true to our Wikimedia identity (trustworthy, academic, neutral, open, inviting). [[ https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html | WCAG 2.0 color contrast guidelines ]]: WCAG 2.0 level AA compliance (normal text size and 18pt+) – necessarily ~~WCAG 2.0 level AAA compliance (normal text size and 18pt+) – where possible~~ 2022 update for people coming by this task: It makes 0 sense to have some colors AAA compliant, the affected user groups still can't work with majority of interface. What we aim for instead is making our products work with specific software of those user needs, while supporting AA out of the box. > A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1 [to pass all four criteria including WCAG AAA at normal text size]. Tools used for contrast checking: [[ http://webaim.org/resources/contrastchecker | Webaim ]], [[ http://snook.ca | Snook.ca ]], [[ http://contrastchecker.com | Contrast checker ]] Tool used for color-deficiency simulation: [[ https://michelf.ca/projects/sim-daltonism/ | Sim Daltonism (Mac OS, iOS) ]]; alternatively: [[http://gmazzocato.altervista.org/colorwheel/wheel.php | Accessibility color wheel]] (Online tool, simulating protanopia, deuteranopia & tritanopia) We're checking mostly on the [[ https://en.wikipedia.org/wiki/Color_blindness#Dichromacy | most common color-deficiency ]]— the Red–green color blindness (Protanopia, deuteranopia, protanomaly, and deuteranomaly). This deficiency experience difficulty with discriminating **red** and **green** hues. --- All chosen colors **must** be extensible and modular. This is so we can apply as little guideline as possible and let the usage be as endless as possible for all contributors. Be mindful of the most used text colors—white and black. --- Current situation after T110555: {F4404108 size=full} // Report from [[ http://contrastchecker.com | Contrast checker ]]: {F2144250} // Tested on [[ https://michelf.ca/projects/sim-daltonism/ | Sim Daltonism ]] for the [[ https://en.wikipedia.org/w/index.php?title=Color_blindness&redirect=no#Dichromacy | most common color deficiency ]]: 1. Protanopia {F2145002} 2. Deuteranopia {F2145003} 3. Protanomaly {F2145410} 4. Deuteranomaly {F2145395}

{F4487514} Improved color palette as of September 2016, compliant to WCAG 2.0 level AA --- Find a palette that complies with the below listed criteria while staying true to our Wikimedia identity (trustworthy, academic, neutral, open, inviting). [[ https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html | WCAG 2.0 color contrast guidelines ]]: WCAG 2.0 level AA compliance (normal text size and 18pt+) – necessarily ~~WCAG 2.0 level AAA compliance (normal text size and 18pt+) – where possible~~ **2022 update for people browsing by this task:** It makes 0 sense to have some colors AAA compliant, the affected user groups still can't work with majority of interface. What we aim for instead is making our products work with specific software of those user needs, while supporting AA out of the box. > A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1 [to pass all four criteria including WCAG AAA at normal text size]. Tools used for contrast checking: [[ http://webaim.org/resources/contrastchecker | Webaim ]], [[ http://snook.ca | Snook.ca ]], [[ http://contrastchecker.com | Contrast checker ]] Tool used for color-deficiency simulation: [[ https://michelf.ca/projects/sim-daltonism/ | Sim Daltonism (Mac OS, iOS) ]]; alternatively: [[http://gmazzocato.altervista.org/colorwheel/wheel.php | Accessibility color wheel]] (Online tool, simulating protanopia, deuteranopia & tritanopia) We're checking mostly on the [[ https://en.wikipedia.org/wiki/Color_blindness#Dichromacy | most common color-deficiency ]]— the Red–green color blindness (Protanopia, deuteranopia, protanomaly, and deuteranomaly). This deficiency experience difficulty with discriminating **red** and **green** hues. --- All chosen colors **must** be extensible and modular. This is so we can apply as little guideline as possible and let the usage be as endless as possible for all contributors. Be mindful of the most used text colors—white and black. --- Current situation after T110555: {F4404108 size=full} // Report from [[ http://contrastchecker.com | Contrast checker ]]: {F2144250} // Tested on [[ https://michelf.ca/projects/sim-daltonism/ | Sim Daltonism ]] for the [[ https://en.wikipedia.org/w/index.php?title=Color_blindness&redirect=no#Dichromacy | most common color deficiency ]]: 1. Protanopia {F2145002} 2. Deuteranopia {F2145003} 3. Protanomaly {F2145410} 4. Deuteranomaly {F2145395}

{F4487514} Improved color palette as of September 2016, compliant to WCAG 2.0 level AA --- Find a palette that complies with the below listed criteria while staying true to our Wikimedia identity (trustworthy, academic, neutral, open, inviting). [[ https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html | WCAG 2.0 color contrast guidelines ]]: WCAG 2.0 level AA compliance (normal text size and 18pt+) – necessarily ~~WCAG 2.0 level AAA compliance (normal text size and 18pt+) – where possible~~ **2022 update for people combrowsing by this task:** It makes 0 sense to have some colors AAA compliant, the affected user groups still can't work with majority of interface. What we aim for instead is making our products work with specific software of those user needs, while supporting AA out of the box. > A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1 [to pass all four criteria including WCAG AAA at normal text size]. Tools used for contrast checking: [[ http://webaim.org/resources/contrastchecker | Webaim ]], [[ http://snook.ca | Snook.ca ]], [[ http://contrastchecker.com | Contrast checker ]] Tool used for color-deficiency simulation: [[ https://michelf.ca/projects/sim-daltonism/ | Sim Daltonism (Mac OS, iOS) ]]; alternatively: [[http://gmazzocato.altervista.org/colorwheel/wheel.php | Accessibility color wheel]] (Online tool, simulating protanopia, deuteranopia & tritanopia) We're checking mostly on the [[ https://en.wikipedia.org/wiki/Color_blindness#Dichromacy | most common color-deficiency ]]— the Red–green color blindness (Protanopia, deuteranopia, protanomaly, and deuteranomaly). This deficiency experience difficulty with discriminating **red** and **green** hues. --- All chosen colors **must** be extensible and modular. This is so we can apply as little guideline as possible and let the usage be as endless as possible for all contributors. Be mindful of the most used text colors—white and black. --- Current situation after T110555: {F4404108 size=full} // Report from [[ http://contrastchecker.com | Contrast checker ]]: {F2144250} // Tested on [[ https://michelf.ca/projects/sim-daltonism/ | Sim Daltonism ]] for the [[ https://en.wikipedia.org/w/index.php?title=Color_blindness&redirect=no#Dichromacy | most common color deficiency ]]: 1. Protanopia {F2145002} 2. Deuteranopia {F2145003} 3. Protanomaly {F2145410} 4. Deuteranomaly {F2145395}