WCAG 2 Color Contrasts

This tool will compute the contrast ratio of varying color text against a specified background color and show compliance to WCAG 2 AA and AAA standards for minimum contrast ratios. Adjusting the range slider left and right to darken and brighten the background color can help you find a shade that meets the AAA standard. Note that the ratio is the same when the foreground and background color are swapped. For example, black text on a red background and red text on a black background have the same ratio.

Why is contrast important? There are a variety of factors which affect readability of your website’s text, including biological (poor or failing eyesight) and environmental (projected onto a screen in a bright room or in the sun in a park on a tiny phone screen). Displaying your content with higher contrast generally improves readability, and thus comprehension, of your content. Furthermore, certain sectors (including public/governmental institutions in the U.S.) are required by law to meet minimum contrast ratios for a11y (accessibility).