Color Contrast Checker

Want to make sure your text is easy to read and meets accessibility requirements? This tool lets you choose a text color and background color to calculate their contrast ratio and check whether they meet the WCAG 2.1 accessibility guidelines. See how your color combination performs against the requirements for normal text, large text, and graphical elements or user interface components, helping you create more accessible and readable designs.

Simply select your colors to see the contrast ratio and accessibility results instantly. All calculations are performed directly in your browser, with nothing sent to a server, keeping your choices private and under your control.

Color Contrast Checker

Text color

Background color

Large preview text

Normal-sized preview text, the way most body copy reads.

21.00:1

Contrast ratio

Normal text — AA

Needs 4.5:1

Normal text — AAA

Needs 7:1

Large text — AA

Needs 3:1

Large text — AAA

Needs 4.5:1

Graphics & UI components

Needs 3:1

Accepts hex codes, CSS color names, rgb() and hsl() values. Nothing you type leaves your browser.

How to use it

The color contrast checker measures the contrast ratio between a text color and a background color against the WCAG 2.1 accessibility guidelines.

Pick a text colorUse the swatch or type a hex code, color name, rgb() or hsl() value.
Pick a background colorSame options as the text color field.
Read the ratioThe contrast ratio and a live preview update instantly.
Check the pass/fail gradesSee at a glance whether your combination is accessible for normal text, large text, and UI elements, at both the AA and AAA levels.

Good to know

Nothing is uploaded

Colors are compared entirely in your browser using the WCAG 2.1 relative luminance formula.

Large text is different

WCAG defines large text as 18pt (24px) or larger, or 14pt (about 18.66px) and bold — it needs a lower ratio to pass.

Order doesn't matter

Contrast ratio is the same whichever color is the text and which is the background — use Swap to flip them without retyping.

Frequently asked questions

How is the contrast ratio calculated?

It follows the WCAG 2.1 formula: each color's relative luminance is calculated from its RGB values, then the ratio is (lighter luminance + 0.05) ÷ (darker luminance + 0.05). Ratios range from 1:1 (no contrast) to 21:1 (black on white).

What's the difference between AA and AAA?

AA is the standard level most accessibility guidelines and laws require. AAA is a stricter, enhanced level. Both are part of the WCAG 2.1 success criteria for contrast.

What counts as 'large text'?

18pt (24px) or larger at any weight, or 14pt (about 18.66px) and bold. Large text has a lower contrast requirement because bigger, bolder strokes are easier to read at lower contrast.

What does 'Graphics & UI components' check?

WCAG 2.1's 1.4.11 Non-text Contrast criterion, which applies to things like button borders, form field outlines and icons that convey meaning. It requires at least 3:1 against the adjacent background.

Is my color data sent anywhere?

No. Every calculation happens locally in your browser.