Contrast Calculator

Check contrast between text and background according to WCAG standards and find accessible alternatives.

21.00:1
AANormal text — minimum 4.5:1 (WCAG AA)
AAANormal text — minimum 7:1 (WCAG AAA)
AA LargeLarge text (≥ 18pt or ≥ 14pt bold) — minimum 3:1 (WCAG AA)
AAA LargeLarge text (≥ 18pt or ≥ 14pt bold) — minimum 4.5:1 (WCAG AAA)
UI (3:1)UI components (borders, icons) — minimum 3:1 (WCAG 1.4.11)

Suggestions that pass the target ratio

Adjust
Target ratio
#050505AAA

Contrast: 20.38

Example: Read this easily

#000000AAA

Contrast: 21.00

Example: Read this easily

#0a0a0aAAA

Contrast: 19.80

Example: Read this easily

#0f0f0fAAA

Contrast: 19.17

Example: Read this easily

#141414AAA

Contrast: 18.42

Example: Read this easily

#1f1f1fAAA

Contrast: 16.48

Example: Read this easily

#292929AAA

Contrast: 14.55

Example: Read this easily

#2e2e2eAAA

Contrast: 13.58

Example: Read this easily

#3d3d3dAAA

Contrast: 10.86

Example: Read this easily

#525252AAA

Contrast: 7.81

Example: Read this easily

#1a1a1aAAA

Contrast: 17.40

Example: Read this easily

#333333AAA

Contrast: 12.63

Example: Read this easily

About: Contrast Calculator

The contrast calculator measures the ratio between a text color and a background color using the WCAG formula, and tells you whether the pair passes AA and AAA for normal text, large text and UI components. It's built for designers and front-end developers checking the accessibility of a brand palette, a button or a dark theme. When the contrast falls short, it suggests nearby colors that reach the ratio you're aiming for.

Features

  • Live contrast ratio with pass or fail badges for AA, AAA, large text and UI components (3:1).
  • Preview in your colors: 16 px body text, large bold text and an action button, with text you can edit.
  • Up to 12 nearby colors that meet the target ratio (3, 4.5 or 7), adjusting either the text or the background.
  • Enter colors as HEX, rgb() or CSS names, use the visual picker, and swap text and background in one click.
  • Undo and redo (Ctrl+Z, Ctrl+Shift+Z); both colors live in the URL, so the link reopens the same pair.

How to use it

  1. Enter the text color and the background color as HEX, rgb() or with the picker.
  2. Read the ratio and check the AA and AAA badges that match your use case.
  3. If the contrast is too low, pick a target ratio and choose whether to adjust the text or the background.
  4. Click Apply on a suggestion, or copy its HEX code.

Questions about usage

Success criterion 1.4.3 (AA) requires at least 4.5:1 for normal text and 3:1 for large text, meaning 18 pt (24 px) and up, or 14 pt (about 18.7 px) bold. Meaningful UI components and graphics need 3:1 under criterion 1.4.11.

AAA is the enhanced level (criterion 1.4.6): 7:1 for normal text and 4.5:1 for large text. Most regulations and accessibility audits target AA, while AAA is usually reserved for long-form reading or content aimed at people with low vision.

Each color's relative luminance is computed from its linearized sRGB channels, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. Results range from 1:1 for identical colors to 21:1 for black on white.