Skip to content
UtilKit

Color Contrast Checker

Colors

Contrast ratio

17.40:1

  • AA · Normal text

    At least 4.5:1
    Pass

  • AA · Large text

    At least 3:1
    Pass

  • AAA · Normal text

    At least 7:1
    Pass

  • AAA · Large text

    At least 4.5:1
    Pass

Normal text · 16px

The quick brown fox jumps over the lazy dog

Large text · 24px

The quick brown fox jumps over the lazy dog
AA is the usual target; AAA is stricter. Large text is at least 24px (18pt) regular or 18.67px (14pt) bold.

About

Contrast ratio compares the relative luminance (perceived brightness) of two colors, from 1:1 for identical colors to 21:1 for black on white. The Web Content Accessibility Guidelines (WCAG) set minimum ratios between text and its background so text stays readable for people with low vision or color vision deficiencies. WCAG 2.2, the current version, keeps the thresholds of 2.0 and 2.1.

How to use

  1. 1.

    Enter a text color and a background color as hex, rgb() or hsl(), or click a swatch to pick one

  2. 2.

    Read the contrast ratio and the AA and AAA Pass or Fail for normal and large text - they update as you type

  3. 3.

    Check the Normal text and Large text samples, and click Swap to try the colors the other way round (e.g. light text on dark) - the ratio stays the same

Common uses

  • ▸

    Ensuring text is readable for users with low vision

  • ▸

    Meeting WCAG 2.2 (and 2.1) AA compliance requirements for web apps

  • ▸

    Choosing between white and black text on a colored button or banner

  • ▸

    Checking color choices before finalising a design

Similar tools

Color Converter
Color Palette Generator
Tint and Shade Generator

Frequently asked questions

How is the contrast ratio calculated?

Each color is converted to its relative luminance L: the sRGB channels are linearized and weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Because green counts most and blue least, yellow text on white scores only 1.07:1, while pure blue on white reaches 8.59:1.

What is the difference between AA and AAA?

AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is the stricter level, requiring 7:1 for normal text and 4.5:1 for large text. AA is the usual target; the checker shows Pass or Fail for all four.

What counts as "large text"?

Text at least 18pt (24px) in regular weight, or at least 14pt (about 18.67px) in bold. Anything smaller is normal text. The Large text sample is 24px regular and the Normal text sample is 16px.

Why does a ratio just under the threshold fail?

WCAG thresholds are strict minimums, so a ratio is never rounded up to meet one. The tool truncates the ratio to two decimals - 4.499:1 shows as 4.49:1 and fails the 4.5:1 AA requirement.

Is my data sent to a server?

No. All contrast calculations run in your browser, and no color data is sent anywhere.