WCAG Color Contrast Checker (AA / AAA) Check color contrast against WCAG AA/AAA.
100% offline
Foreground
Background
Result
17.40:1Ratio 17.40:1 · AA pass
Large text sampleNormal text sample — the quick brown fox jumps over the lazy dog.
AA Normal PassAA Large PassAAA Normal PassAAA Large Pass

About WCAG Color Contrast Checker (AA / AAA)

A color contrast checker measures the legibility of text against its background and grades it against the WCAG 2.1 accessibility guidelines. Low-contrast text is one of the most common accessibility failures on the web — it's hard to read for everyone and a real barrier for people with low vision or color-vision deficiencies.

This free WCAG contrast checker computes the exact contrast ratio between any two colors and tells you instantly whether the pair passes AA and AAA for both normal and large text, with a live preview of real text in your chosen colors. Enter hex or rgb() values, or use the native color pickers.

Everything runs entirely in your browser — your colors never leave your device, and it works fully offline.

Features

  • Exact WCAG contrast ratio computed live as you change colors
  • AA and AAA pass/fail for normal and large text
  • Native color pickers plus hex / rgb() text input
  • Live preview of sample text in your foreground and background

How to use

  1. Pick a foreground (text) color with the swatch or type a hex / rgb() value.
  2. Pick a background color the same way.
  3. Read the contrast ratio and the live text preview.
  4. Check the AA / AAA badges for normal and large text.

Frequently asked questions

What contrast ratio passes WCAG AA?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (roughly 18px bold or 24px regular and up). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text.

What counts as "large text"?

WCAG defines large text as at least 18.66px (14pt) bold, or 24px (18pt) regular. Large text has a lower contrast requirement because bigger glyphs are easier to read.

How is the contrast ratio calculated?

Each color's relative luminance is computed from its linearized sRGB channels (0.2126·R + 0.7152·G + 0.0722·B), then the ratio is (L_lighter + 0.05) / (L_darker + 0.05). It ranges from 1:1 for identical colors to 21:1 for black on white.

Does this checker send my colors anywhere?

No. All parsing and math happen locally in your browser, so nothing is uploaded and the tool works offline.

Related tools

CSS Unit Converter — px to rem, em, pt, vw & vh Convert px, rem, em, pt, %, and viewport units. Color Palette Generator – Harmony Schemes & Hex Generate harmonious color palettes from a base color. Color Converter — HEX, RGB, HSL, HSV, CMYK Convert colors between HEX, RGB, HSL, HSV, and CMYK.

Everything runs locally in your browser — your input is never uploaded.