Color Contrast Checker

All tools

Check the WCAG contrast ratio between a text and background color — see AA/AAA pass-fail grades for normal text, large text and UI components, with a live preview and accessible-color suggestions.

Text color
Tint
Background color
Tint
Contrast ratio
--:1
Normal text
Body text under 18px (or under 14px bold)
AA AAA
Large text
18px+ regular, or 14px+ bold
AA AAA
UI components
Icons, borders, form controls & graphics
AA AAA
Live preview

The quick brown fox

Large text reads comfortably when contrast is sufficient.

This is a sample paragraph of normal body text. Good color contrast keeps your content legible for everyone, including people with low vision or color blindness. a sample link.

Small print and captions are the hardest to read — they need the most contrast.
Sample button Sample button
Suggestion

Everything is computed live in your browser using the WCAG 2.x relative-luminance formula — no uploads, no sign-up, completely free.

About Color Contrast Checker

The Color Contrast Checker measures the WCAG contrast ratio between a text color and a background color, then grades the pair against the AA and AAA accessibility levels for normal text, large text and UI components. The ratio and every pass/fail verdict update live as you adjust either color.

A realistic preview panel renders headings, body copy, small print, a button and a link in your chosen combination, so you can judge legibility with real content instead of abstract swatches. When a pair fails, the tool suggests the closest accessible text color that reaches the AA threshold of 4.5:1, ready to apply with one click.

The math follows the WCAG 2.x relative-luminance formula and runs entirely in your browser — nothing is uploaded and the checks are free. You can also copy a compact text report of the ratio and grades to paste into an accessibility review or a pull request.

How to use Color Contrast Checker

  1. Set your text color and background color with the pickers or by typing values.
  2. Read the contrast ratio and the AA/AAA results for normal text, large text and UI components.
  3. Inspect the live preview to see real headings, paragraphs, buttons and links in your colors.
  4. If the pair fails, apply the suggested accessible text color or swap the two colors.
  5. Click "Copy report" to share the ratio and compliance results.

Frequently asked questions

WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components such as icons and form borders. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text.

Text of 18px or larger at regular weight, or 14px and larger when bold. Because large glyphs are easier to resolve, WCAG allows them a lower contrast ratio of 3:1 at level AA.

Yes. Every check is computed instantly in your browser using the WCAG relative-luminance formula, with no sign-up, no usage limit and no cost.

Use the built-in suggestion: the tool finds the closest variant of your text color that passes AA against the current background and lets you apply it directly. If no variant of the text color can pass, adjust the background instead.

It covers the color-contrast criteria, which are among the most common accessibility failures, but not everything. You should still check focus states, color-independence of information, font sizes and how the palette holds up under color-blindness simulation.

No. The two colors, the ratio and the suggestions are all computed locally in your browser — the page makes no server requests while you work.
Share this
Related Tools
Color Blindness Simulator See your image or palette the way people with protanopia, deuteranopia, tritanopia or achromatopsia do — runs entirely in your browser, nothing is uploaded. Free
Palette Exporter Paste or import a set of colors and export them instantly to CSS variables, SCSS, Tailwind config, JSON or SVG swatches — the finishing step for any palette. Free
Color Shades Generator Generate a full range of tints and shades from a single color — choose your darken/lighten step and shade count, then copy any value instantly. Free
Web-Safe Color Palette Browse the classic 216 web-safe colors as a clickable swatch grid — sort by hue or cube order, filter by hex, and copy any HEX or rgb() value instantly. Free
Font Pairing & Google Fonts Directory Browse a curated directory of popular Google Fonts with live previews, filter by category and search by name, then copy ready-to-paste CSS and explore suggested font pairings — all in your browser. Free
Pantone Color Matcher Look up any Pantone solid-coated code to read its HEX, RGB and CMYK values, or enter a HEX/RGB color and instantly find the nearest Pantone match — all in your browser. Free
Popular searches
color contrast checker wcag contrast ratio accessibility contrast checker text contrast checker aa aaa contrast test check color contrast online
Need help?
Found an issue with this tool? Let our team know.
Report an issue

Add this free tool to your own website — copy and paste the code below.