Accessibility FAST
Accessible Color
1 in 12 men and 1 in 200 women have some kind of color vision deficiency.[1] To create inclusive content, foreground information must have sufficient color contrast against background colors. Additionally, it is essential that color is not the only means to convey or emphasize information.
On this page:
Accessible Color
Consider that good color practices aren’t just for those who see color differently. Better practices:
Are essential for
- Readers with a color vision deficiency.
- Readers with low vision.
- Readers on an electronic paper screen, like an e-reader.
But also benefit
- All readers, regardless of access means.
- Readers who customize appearance and style.
- Effective use of color ensures information looks similar regardless of device and user settings, such as dark or night mode or other custom contrast settings.
- Readers who print content in black and white.
- Content that relies on color or lacks sufficient contrast will lose meaning in black and white.
- Readers who experience eye fatigue.
- Readers viewing content in poor lighting or when there is glare from the sun.
Color Contrast
For accessible color contrast, aim for at least a 4.5:1 ratio. To (over)simplify that ratio, it means the text is 4.5 times brighter or darker than the background. Large text (size 18 point or greater), or bold 14 point or greater, requires only a 3:1 ratio to be accessible. Logos and decorative images have no color requirements.
As an example of an accessible contrast ratio, black text on a white background has a ratio of 21:1. Orange text on a white background (or vice-versa) has a ratio of 3.37:1 and does not provide sufficient color contrast.
Color combinations to avoid:
- Red and green
- Green and red or blue or brown or black
- Light green and yellow
- Blue and purple or grey
Use dark font colors on light backgrounds (black text on a white page, for example) and light font colors on dark backgrounds (for example, white text on a black background).
Use of Color
Further, don’t rely on color alone to convey information or emphasize importance. Accessible practice is to add visual or text equivalents to color, for example:
- Use color, shapes, and text in charts and diagrams.
- Add text indicators to highlighted table cells.
- Include reminders like “important” or “required” in addition to using bold or a specific font color.
If you rely on color alone, readers with color vision deficiency, using screen readers or text-to-speech software, or those viewing in black and white will miss the meaning or intended emphasis.
Digital Color
Digital colors are specified using color codes. The most common color codes are Hexadecimal (hex), RGB, and HSL. Each of these color codes expresses colors using different values. Try entering a color in this Color Converter tool to see how colors can be coded.
Hex values are referred to in this guide, but the principles are applicable to any color code system.
Color Code Tools
There are many options for finding color codes.
Firefox
Firefox has a built-in eyedropper tool. Navigate to Tools > Browser Tools > Eyedropper. Click on the color you want, and the hexadecimal code is copied to your clipboard.
Additionally, right-click on any webpage and select Inspect. Navigate to the Accessibility pane and select an option from the Simulate menu to see how different people may experience the color of that page.
Chrome
ColorZilla Chrome extension allows you to easily copy color codes from websites, or anywhere on your screen outside the browser window. Simply open the extension and use the eyedropper to select a color. The HEX color code is added to your clipboard.
In Chrome, you can right-click on the color you want and select Inspect. Navigate to the Styles pane in the DevTools window. Additional options are available in the Computed tab. On a complicated page, you may wish to use the filter box to search for “color.” Click on the color box next to the element you want to get the color codes. This option display contrast ratios only if the color is coded as a foreground or background color relative to another properly coded element’s color. That is not always the case, however, you can still use this method to find the hex codes and compare them in another tool.
macOS
Built into macOS is the Digital Color Meter application. Press CMD + L to lock the meter’s position on the desired color. Use the Color menu or press SHIFT + CMD to copy the color code. This tool allows users to copy color codes as RGB.
Contrast for macOS is an excellent applicant ion to determine colors and color contrast.
Windows
TPGi Color Contrast Analyser for Windows is an excellent option.
You can use Microsoft PowerToys to find Hex codes.
Use these tools to find color codes and contrast checking tools to verify accessible color contrast.
Contrast Checkers
WebAIM (Accessibility in Mind) is an exceptional resource that has a contrast checker (that can be added as a browser tool), a link contrast checker, and additional reading on color contrast.
ACE (Accessibility Color Evaluator) is an excellent tool for checking color contrast. You can set multiple colors for multiple elements (background, text, link, hover, etc.) and see the corresponding color contrast ratios.
Consider some of these as well and find what works best for you:
Who can use this color combination?
- Color Blind Awareness, "About Color Blindness" ↵
Colour contrast is the difference in saturation, brightness, and pigment of different elements relative to one another. A contrast ratio of at least 4.5:1 between text and background is required by common accessibility standards.
