Checking Color Contrast
Our Standard to Check Against
Remember, we have the WCAG 2.0 success criteria 1.4.3 (AA), which requires a color contrast ratio of 4.5:1 for all text excluding the following exceptions:
- 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 active user interface component, pure decoration, 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.
MS Office Colors Hexadecimal Values
Many of the free color contrast checkers available on the web use hexadecimal format (web colors) to represent the colors you enter. We will cover two examples in the next section.
Following is a table of the standard MS Office Colors with their corresponding hexadecimal values. This can be helpful with many of the free web-based color contrast checkers.
Theme Colors
|
FFFFFF |
000000 |
EEECE1 |
1F497D |
4F81BD |
C0504D |
9BBB59 |
8064A2 |
4BACC6 |
F79646 |
|
F2F2F2 |
808080 |
DDD9C4 |
C5D9F1 |
DCE6F1 |
F2DCDB |
EBF1DE |
E4DFEC |
DAEEF3 |
FDE9D9 |
|
D9D9D9 |
595959 |
C4BD97 |
8DB4E2 |
B8CCE4 |
E6B8B7 |
D8E4BC |
CCC0DA |
B7DEE8 |
FCD5B4 |
|
BFBFBF |
404040 |
948A54 |
538DD5 |
95B3D7 |
DA9694 |
C4D79B |
B1A0C7 |
92CDDC |
FABF8F |
|
A6A6A6 |
262626 |
494529 |
16365C |
366092 |
963634 |
76933C |
60497A |
31869B |
E26B0A |
|
808080 |
0D0D0D |
1D1B10 |
0F243E |
244062 |
632523 |
4F6228 |
403151 |
215967 |
974706 |
Standard Colors
|
C00000 |
FF0000 |
FFC000 |
FFFF00 |
92D050 |
00B050 |
00B0F0 |
0070C0 |
002060 |
7030A0 |
Color Contrast can be tricky, but thankfully we have a defined standard for color contrast, and we have free tools available to help us measure and determine whether we are meeting the standard.
WebAIM Color Contrast Checker
WebAIM provides a color contrast checker Links to an external site. which allows you to enter the hexadecimal code for any web color.
Colour Contrast Analyser
There is a free tool from The Paciello Group that has become the standard for checking color contrast. It installs locally on your machine and enables you to check the color contrast in any program on your computer.
The Colour Contrast Analyzer Links to an external site. allows you to use your mouse to point and click on the colors in your text or background, which enables you to check images for color contrast in addition to digital text.
Once you have installed the Colour Contrast Analyzer on your local machine you can use it to check the contrast of any color combinations visible on your computer screen.
Instructions for Using the Colour Contrast Analyzer
The following instructions explain how to use the Colour Contrast Analyzer:
- Use the eye-dropper tool to select colors for the foreground and background (or enter hexadecimal values).
- The tool will automatically assess the color combination and generate a report that includes your WCAG 2.0 status for AA and AAA.
- Include contrast results for color blindness to show contrast values for different types of color blindness.