About Contrast Checker

Check WCAG AA/AAA contrast ratio between two colors. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Verifying brand colors meet WCAG accessibility requirements
• Testing text readability on colored backgrounds for UI designs
• Auditing existing websites for accessibility compliance
• Choosing accessible link colors that stand out from body text

Tips

• Aim for 4.5:1 ratio minimum to meet WCAG AA standards
• Test both large text and normal text contrast requirements
• Check your color pairs against both AA and AAA compliance levels

Fun Facts

• WCAG 2.0 was published on December 11, 2008, establishing the 4.5:1 contrast ratio requirement that is now law in many countries.
• The contrast ratio formula uses relative luminance, which weights green at 71.52%, red at 21.26%, and blue at only 7.22% to match human vision.
• An estimated 1.3 billion people worldwide live with some form of visual impairment, making contrast compliance a significant accessibility concern.

FAQ

What's a passing WCAG contrast ratio?

AA: 4.5:1 for body text, 3:1 for large text and UI. AAA: 7:1 for body, 4.5:1 for large. Modern web standards require at least AA.

Why does the text on some pages look unreadable?

Below 3:1 ratio. The tool flags anything under that as accessibility failure. Common culprit: gray body text on white background (#888 = 3.5:1, borderline).

Does it account for text size?

Yes — toggle between body text and large text. Large means 18pt+ or 14pt bold. The threshold drops because big text is easier to read at lower contrast.

What about APCA?

APCA is a newer perceptual contrast algorithm. WCAG 3.0 will use it. Current WCAG 2.1 uses the relative luminance formula; this tool uses WCAG 2.1.