Posted under Developer & Development & Testing & WCAG
Written by: Mike Adams
I recently came across a tool I hadn’t used before and wanted to share it and another resource for analyzing color contrasts. If we look at 1.4.3 within WCAG 2.0 it lays out the groundwork but having a tool to use is such a nice resource to have.
Per the W3C:
“1.4.3 Contrast (Minimum):The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
•Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
•Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
•Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”
Additional contrast items are addressed in 1.4.6:
“1.4.6 Contrast (Enhanced):The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
?Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
?Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
?Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”
(http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast)
There are two free tools I’m listing for use though surely there are more available:
1. Luminosity Colour Contrast Ratio Analyzer-Juicy Studios
This seems like a very usable resource and operates directly from the website of Juicy Studios. I’m impressed at the simplicity of it and appreciate the efforts to make it not just a tool for usability and accessibility but accessible in itself. http://juicystudio.com/services/luminositycontrastratio.php#specify
2. Contrast Analyser -The Paciello Group
I’ve used this many times and you get a simple interface that allows you to enter the html for your colors or switch modes and use a mouse pointer to select given colors that are currently on your screen. This is a nice touch when actively looking at a page. It does however require you to download it and run it from your desktop. http://www.paciellogroup.com/resources/contrast-analyser.html
Depending on your needs I’d expect either of these will work well for you and encourage you to meet the guidelines for easier use by all.
-->I recently came across a tool I hadn’t used before and wanted to share it and another resource for analyzing color contrasts. If we look at 1.4.3 within WCAG 2.0 it lays out the groundwork but having a tool to use is such a nice resource to have. Per the W3C: “1.4.3 Contrast (Minimum):The visual [...]
Read more: Color Contrast and Accessibility...