Color Contrast Checker

What is a Color Contrast Checker?

A Color Contrast Checker helps you verify that the contrast ratio between text and background colors meets the Web Content Accessibility Guidelines (WCAG) standards. Ensuring sufficient color contrast is essential for making your content accessible to users with visual impairments, including those with low vision or color blindness. By checking your color combinations against WCAG 2.x criteria, you can create inclusive designs that work for everyone.

WCAG defines three levels of conformance: A (minimum), AA (target), and AAA (highest). For color contrast, the relevant thresholds are:

• AA Normal Text: Requires a contrast ratio of at least 4.5:1.
• AA Large Text: Requires a contrast ratio of at least 3:1 for text 18px or larger (or 14px bold).
• AAA Normal Text: Requires a contrast ratio of at least 7:1.
• AAA Large Text: Requires a contrast ratio of at least 4.5:1.

If your color combination does not meet the 3:1 threshold, it fails even the most basic accessibility requirements. Use this tool to test your designs before publishing.

How to Use This Tool

Using the Color Contrast Checker is simple and works in real time:

1. Pick a Text Color: Use the first color picker to choose the foreground (text) color, or type a hex value directly.
2. Pick a Background Color: Use the second color picker to set the background color behind the text.
3. Swap Colors: Click the Swap Colors button to quickly invert your foreground and background choices.
4. Try Presets: Select from preset combinations like Dark on White or Red on White to test common scenarios.
5. Read the Results: The contrast ratio appears as a large number. Check the PASS/FAIL indicators for each WCAG level. The live preview shows how your text will look in practice.

The tool updates instantly as you adjust the colors, so you can iterate quickly. For more color utilities, try our Hex to RGB Converter or the Color Scheme Generator.

How Contrast Ratio Is Calculated

The contrast ratio follows the WCAG 2.x formula. First, each RGB channel is linearized using the sRGB transfer function: if a channel value divided by 255 is less than or equal to 0.03928, divide by 12.92; otherwise raise ((channel + 0.055) / 1.055) to the power of 2.4. The relative luminance L is then computed as 0.2126 times the linearized red channel plus 0.7152 times green plus 0.0722 times blue. Finally, the contrast ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the darker one.

Why Accessibility Matters

Over 1 billion people worldwide have some form of disability. Poor color contrast can make websites unusable for users with low vision, color vision deficiencies, or those viewing content in bright sunlight. Beyond ethical considerations, many countries have legal requirements for web accessibility. Meeting WCAG AA standards is widely considered the minimum benchmark for professional web design.