What is Color Contrast Checker?

Color Contrast Checker calculates the contrast ratio between a text color and a background color, and checks the pair against WCAG AA and AAA plus an APCA reference. Use it to confirm that the colors you plan for body text and headings are readable.

How to Use

1. Enter a text color and a background color
2. The contrast ratio, WCAG results, APCA reference, and preview update as you go
3. If the pair falls short, adjust the lightness or swap the colors and try again

Enter colors as 3- or 6-digit hex codes or as CSS functions such as rgb(), hsl(), and oklch(). To start from a known combination, pick a brand preset to set both colors at once.

Reading the Results

The contrast ratio runs from 1:1 to 21:1. A higher value means a larger difference in brightness between the text and the background.

WCAG 2.x sets different thresholds for normal and large text.

Large text means 24px or larger, or 18.66px or larger in bold. When normal text passes AAA, the result is AAA. When normal text passes AA, it is AA. When only large text passes AA, it is "Large text only".

APCA is a separate model shown as a reference. An Lc of 75 or higher suits body text, 60 or higher suits large text, and a negative value means light text on a dark background. It does not replace the WCAG result, so use WCAG when you need to meet a standard.

Main Settings

Lightness

Adjust the lightness of the text and background colors from 0% to 100%. Use it when you want to change brightness without shifting the hue.

Brand Presets

Apply a color pair from a real brand, such as Spotify or IKEA. They work as a starting point when you are choosing a combination.

Use Cases

• Checking whether a site or app palette meets the contrast requirements for body text
• Testing a brand color on a button or heading before you commit to it
• Flipping a light palette for dark mode and checking that it stays readable
• Sharing a contrast figure in a design review

Things to Keep in Mind

• The result covers the text and background colors only. It does not account for font weight, letter spacing, background images, or transparency.
• A pair can meet the threshold and still feel hard to read when the text is very thin or small.
• APCA is still in development for WCAG 3.