ع

Contrast Checker

Accurate WCAG contrast ratio with AA/AAA results and accessible suggestions.

Large heading text

Normal body text should stay comfortable to read for everyone, including people with low vision.

Button
—
AAAAA
Normal text
Large text
Icons & UI borders—

About the Contrast Checker

Check whether text and background colors meet WCAG 2.x contrast requirements for normal text, large text and interface components, and get the nearest passing alternatives.

How to use it

  1. Enter the text (foreground) color.
  2. Enter the background color.
  3. Read the ratio and pass/fail results for AA and AAA.
  4. Apply a suggested color if the pair fails.

Examples

  • Gray #777777 on white is 4.48:1 — it fails AA for normal text.
  • #595959 on white is 7.0:1 and passes AAA.

Frequently asked questions

What ratios are required?
WCAG AA: 4.5:1 for normal text, 3:1 for large text and UI components. AAA: 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
At least 24px regular or about 18.66px (14pt) bold.
How are suggestions made?
The tool adjusts the lightness of your foreground color in HSL until the target ratio is reached, keeping the hue.

Related tools

Palette Accessibility AnalyzerEvaluate readability and contrast across every combination in a palette.Background & Text PreviewTest text, heading, button and border colors on a live mock interface.Color Blindness SimulatorApproximate protanopia, deuteranopia, tritanopia and achromatopsia simulations.