What is Color Contrast Checker?#
Color Contrast Checker measures the contrast between a text color and a background color. Enter both colors to see the WCAG contrast ratio, the AA and AAA results for normal and large text, and an APCA reference value. A preview renders a sample article in your colors, so you can assess the combination as you adjust the colors.
How to Use#
Set a text color and a background color by picking from a swatch or typing a hex value. The contrast ratio, the AA and AAA results, and the preview update as you change either color. The lightness slider adjusts either color in place when you want to fine-tune it.
Reading the Results#
- Contrast ratio: a value from 1.00 to 21.00. The higher it is, the more the two colors differ in brightness.
- AA and AAA: WCAG 2.x levels. AA is the common minimum and AAA is stricter. For normal text, AA needs 4.5 and AAA needs 7. For large text, AA needs 3 and AAA needs 4.5. Large text means 24px or larger, or 18.66px or larger in bold.
- APCA: a newer contrast model. The tool shows its Lc value and a band. Lc 75 and above suits body text, 60 and above suits large text, and below 60 is not enough. Treat this as a second opinion next to the WCAG result.
Use Cases#
- Checking whether a text color reaches AA before you build a design.
- Finding a text color that reads on a colored background.
- Confirming that a brand color still works for a button label or a caption.
- Comparing a pair under WCAG and APCA before you commit to it.
FAQ#
No. Everything runs in your browser, so the colors you enter stay on your device.
They are different models. WCAG compares relative luminance with a fixed formula, while APCA weighs light text on dark and dark text on light differently. WCAG sets the requirement, so treat the APCA value as a second opinion rather than a replacement.
No. The tool works with opaque colors. A six-digit hex value or a solid color works as-is.
The ratio comes from the two colors only. WCAG is looser for large text, so the card that matches your text size is the one to check. Real-world readability also depends on font size and weight, so the preview is only a guide.