Skip to content
Stack Mode
> stack://searchLoading index…

  • Quick actions

    Book a Discovery Call/discovery-call
  • Run a free website check/website-check
  • See the Price Guide/pricing
  • Call (775) 440-6800
  • Client Login/login

Color Contrast Checker

Check whether text and background colors have enough contrast for WCAG, and get a nearby color that passes.

Runs in your browser. Nothing is uploaded.

Use the tool

> contrast ratio

3.45:1

  • Normal text, AAneeds 4.5:1Fail
  • Normal text, AAAneeds 7:1Fail
  • Large text, AAneeds 3:1Pass
  • Large text, AAAneeds 4.5:1Fail
  • UI components and graphics, AAneeds 3:1Pass

Large text means 18 pt (24 px) or larger, or 14 pt (about 18.7 px) bold or larger. WCAG 2.2 uses the same contrast formula as 2.0 and 2.1. The ratio is cut down, not rounded up, so a near miss never shows as a pass.

Live preview

Normal text at 16 px. The quick brown fox jumps over the lazy dog.

Large text at 24 px bold

UI component

Suggest a passing color

Darken or lighten the text
Darken or lighten the background

Keeps the hue and saturation and changes only lightness, using the smallest change that passes. Click one to apply it.

Colors are one part of a page. To grade the speed, SEO and security of a whole page,Run the free website check

> how to use it

  1. 01

    Enter the text and background colors as hex or rgb, or pick them with the color picker. Swap them with one click.

  2. 02

    Read the contrast ratio and the AA and AAA results for normal text, large text and UI components.

  3. 03

    Check the live preview to see how the pair actually reads.

  4. 04

    If it fails, choose a target level and apply the suggested text or background color.

FAQ

Color Contrast Checker questions.

What contrast ratio do I need?
For WCAG level AA, 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA asks for 7 to 1 and 4.5 to 1. Interface components and meaningful graphics need 3 to 1 against their surroundings under AA.
What counts as large text?
WCAG defines it as at least 18 point (24 CSS pixels) or at least 14 point (about 18.7 pixels) when bold.
Did WCAG 2.2 change the contrast formula?
No. WCAG 2.2 uses the same relative luminance and contrast ratio calculation as 2.0 and 2.1. The 4.5 and 3 thresholds are unchanged.
How does the suggested color work?
It keeps the hue and saturation and moves only the lightness, in whichever direction needs the smaller change, until the pair reaches your target. Sometimes no lightness of a hue can reach the target against the other color, and the tool says so.
Is anything sent to a server?
No. The math runs in your browser. Your colors are saved only in this browser so a refresh doesn't lose them.
More free toolsUTM BuilderPassword GeneratorCSS Clamp CalculatorSVG CleanerImage OptimizerSchema Markup GeneratorGoogle Search Result PreviewSocial Share Preview CheckerROI Calculator