HTML5 and CSS3 logo

Contrast Colors

Foreground
Background

Contrast Result

WCAG Color Contrast Checker

Check text and background color contrast online. See the contrast ratio, live preview, and WCAG AA or AAA results for normal and large text.

How to use this tool

Compare a foreground text color with a background color before using the pair in a design. The result shows the contrast ratio and the WCAG 2.x thresholds it meets.

  1. 1

    Choose the text color

    Set the foreground color that will be used for text or an interface element.

  2. 2

    Choose the background

    Set the color that will appear directly behind the foreground color.

  3. 3

    Review the live result

    Check the sample preview, calculated ratio, and AA or AAA pass results.

  4. 4

    Adjust and retest

    Change either color until the required normal-text or large-text threshold passes.

Color Contrast Checker FAQ

What is a contrast checker?
A contrast checker is a tool that measures the contrast ratio between two colors to ensure text is readable and accessible.
What is WCAG AA and AAA?
WCAG AA and AAA are accessibility standards that define minimum contrast ratios required for text to be readable by all users, including those with visual impairments.
How is contrast ratio calculated?
Contrast ratio is calculated based on the brightness difference between foreground (text) and background colors.
What contrast ratio is considered acceptable?
For normal text, WCAG recommends at least 4.5:1 for AA and 7:1 for AAA. For large text, lower ratios may be acceptable.
Why is color contrast important?
Good contrast improves readability and ensures your website is accessible to users with visual impairments or color blindness.