While color blindness is given some attention in web design, contrast ratio tends to be ignored, especially by designers who place an emphasis on lightness and subtlety.

Good color contrast design ensures visibility and legibility under a wide range of lighting conditions, screens, device settings and visual acuity. 80% of the adult population have some form of visual deficit, from deuteranopia to myopia to near blindness, making sites designed with effective color contrast vitally important. A related factor is text size and weight: small text, or letterforms with thin strokes, is harder to read on a screen, especially on mobile devices, no matter what colors are used.

Determining the contrast ratio of the colors used in your page design and their effect on the readability of text at various font sizes is an extremely useful accessibility metric. Expressed mathematically, contrast ratio is a measurement of the visual difference between two colors: the highest contrast (black on white, or the reverse) has a ratio of 21:1. At the other end, using the same or very similar colors in comparison creates a 1-to-1 contrast.

The WCAG has the following recommendations for contrast ratio and font sizes:

• Text that is considered small – approximately equivalent to 1.2em or 120% of the default body text size – should have a contrast ratio of at least 4.5 : 1 to its background.
• Text that is 1.2 ems or higher and bolded, or normal text that is 1.5 em / 150% in size or greater, should have a contrast ratio of at least 3 : 1.

Until recently tools to calculate these ratios relied solely on hexadecimal colors. With designers increasingly using rgb and hsl CSS color systems combined with transparency, Lea Verou recently created a tool that allows contrast ratio comparison using any CSS color, together with instant WCAG validation.

Workflow Recommendation

The importance of contrast ratios means that it should be determined early in the site production process, not as a “now that the site is done I should probably check this” step. I would suggest the following:

• Choose colors for your site – using a tool or one of the color schemes I have previously mentioned.
• Determine what hues will be used in which combinations.
• Create a simple web page with filler text at appropriate sizes (at least 1.2 em in size) and background/foreground color combinations.
• Test the page under a variety of simulated color blindness conditions.
• Compare the same colors to determine that they have acceptable contrast ratios.
• Adjust text size and hue as necessary, and use the final combination in your site’s stylesheet.

Further Considerations

Modern web development practices and design trends have introduced a few complications to this process:

• Tools do not currently measure the contrast ratio of text against a multicolored background, such as an image or gradient. If you must present content this way, at the very least add a distinct shadow on the text to distinguish it from its background.
• Be aware that mobile devices will scale down the size of text on your web page: you should use media queries to compensate for this, raising font sizes at low resolutions to ensure that text remains legible.
• A general design recommendation is to not rely on color to show a change of state or meaning: i.e. link text in a paragraph should be colored and underlined, or colored and bolded, making it distinct from the surrounding text in both size and hue.

With practice, you’ll find that achieving good contrast ratios for your site content is easy to achieve, and improves the communication of your site.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.