Motivations
Low color contrast can make text and other page elements harder to see for everyone, especially users with disabilities and many older users. One common form of disability is colorblindness, but there are many forms of color blindness with different effects on perception of color.
When working with meaningful content such as text, visuals and user inputs, it is important to ensure users can easily distinguish between elements.
There are additional considerations we must make to avoid eye strain and a blurred effect known as halation for some users.
Color contrast standards
The Post's accessibility statement notes that we are guided by the WCAG 2.1 Level AA standard. However, we strongly encourage meeting the level AAA standard whenever possible.
Since 2021, WPDS has provided a library of grayscale and color tokens designed with adherence to WCAG's AA standard in mind. Within our token library, there is a theme token labeled accessible, which maps to hex value #666666 in light mode and #858585 in dark mode. The contrast ratio is 5.7 when the accessible color is used in light mode on a pure white (#FFFFFF) background and in dark mode on a pure black (#000000) background.
To ensure acceptable color contrast when using other color tokens, you will need to test manually.
Testing color contrast, including for colorblind users
Use the below tools in conjunction with each other to ensure colors meet contrast standards for both colorblind and non-colorblind users. You should also use the tools to test your selected colors in both light mode and dark mode whenever both are offered.
WebAIM Color Contrast Checker
The WebAIM Color Contrast Checker evaluates colors for WCAG compliance. You enter the hex values for the foreground and background colors, and the site calculates the contrast ratio. It rates the colors with a “Pass” or “Fail” rating. You can use the slider under each color to lighten or darken it until a “Pass” rating is attained. The hex code will update accordingly.
Adobe Color Contrast Checker
The Adobe Color Contrast Checker has a different UI than the WebAIM tool, so try both to see which better fits your needs.
David Nichols' coloring for colorblindness tool
The coloring for colorblindness tool allows you to input a color palette and see how that palette appears to users with different forms of colorblindness.
You can inspect the resulting colors in your browser to collect their hex codes and independently verify they have enough contrast with each other.
Adobe Color Blind Safe tool
The Adobe Color Blind Safe tool has a different UI than David Nichols' tool, so try both to see which better fits your needs.
One advantage of the Adobe tool is that it has a built-in warning when colors are deemed to conflict for at at least one form of color blindness. Learn more on Adobe's webpage about its tools.
Avoiding eye strain and halation
While you may be tempted to use black text on a white background — and vice versa — for maximum color contrast, these combinations raise other issues.
Within our color tokens library, there is a theme token labeled accessible, which maps to hex value #666666 in light mode and #858585 in dark mode. The contrast ratio is 5.7 when the accessible color is used in light mode on a pure white (#FFFFFF) background and in dark mode on a pure black (#000000) background.
Avoid white text on black backgrounds
Never use white (#FFFFFF) text on a black (#000000) background (in any circumstance, but be especially weary of this in dark mode). This causes a fuzziness effect known as halation for many readers with astigmatism, and it makes reading difficult.
You can use light gray text instead of white, and/or a dark gray background instead of black, to avoid this issue.
View our color tokens library — including the accessible token mentioned above — for more info.
Avoid black text on white backgrounds
Never use black (#000000) text on a white (#FFFFFF) background (in any circumstance, but be especially weary of this in light mode). Pure black text on a white background is known to cause eye strain among many users.
You can use dark gray text instead of black, and/or a light gray background instead of white, to avoid this issue.
View our color tokens library — including the accessible token mentioned above — for more info.
Dark mode vs. light mode settings
Light or dark, or both?
It is best practice to support both light and dark mode on all content. This includes conducting the contrast tests described above in both modes. All links, buttons, fonts, etc. on the page should be visible in both modes.
Respecting browser settings
Many users will have dark mode configured in their browser and/or system settings. When possible, we should build responsively and default to light or dark mode based on user settings without them having to manually click a toggle on our page.
A good way to respond to user settings is the prefers-color-scheme CSS media feature, as documented by MDN.
Avoiding color coding
Even if you have fully accounted for contrast, colorblindness and compatibility with various user settings like dark mode, you should never rely purely on color coding to convey information to users.
Screen reader users will always need text explanations of content. Others have their devices set to grayscale, so colors are mostly indistinguishable. Furthermore, colors may also have different cultural meanings across users, leading to confusion over the selection of colors and what it all means.
Save yourself and your users the trouble by using text to convey the meaning of anything that you're tempted to convey via color.