WCAG Color Contrast Checker

Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.

Inputs

Foreground/text color, e.g. #333 or #1a73e8.

Background color behind the text.

Result

Loading calculator…
—

General calculation reads

Amazon affiliate
How Not to Be Wrong
Jordan Ellenberg - math thinking
Shop on Amazon
The Joy of X
Steven Strogatz - accessible math
Shop on Amazon
Scientific calculator (Casio fx-991EX)
Shop on Amazon

As an Amazon Associate we may earn from qualifying purchases. This does not add cost for you.

How to use this calculator

  • Enter the text (foreground) color as a hex value.
  • Enter the background color as a hex value.
  • Read the contrast ratio and the AA/AAA pass-fail results.
  • Aim for at least 4.5:1 (AA) for body text, 3:1 for large text.

About this calculator

Color contrast is the difference in luminance between text and its background, and it is one of the most important factors in whether people — especially those with low vision — can read your content. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio from 1:1 (no contrast) to 21:1 (black on white) and set minimum thresholds: AA, the common legal standard, requires at least 4.5:1 for normal text and 3:1 for large text; AAA, the enhanced level, requires 7:1 and 4.5:1. This checker takes a text color and a background color in hex, computes their relative luminance using the official WCAG formula, and reports the ratio along with pass/fail for each level and text size. Use it to verify that your color choices are legible before shipping a design. Remember that large text is defined as 18pt (24px) regular or 14pt (18.66px) bold.

How it works — the formula

Linearize: c/255 ≤ 0.03928 ? /12.92 : ((c/255+0.055)/1.055)^2.4 Luminance L = 0.2126·R + 0.7152·G + 0.0722·B Ratio = (L_light + 0.05) / (L_dark + 0.05)

Each channel is linearized to account for gamma, weighted to perceived brightness, then the two luminances form the ratio with a 0.05 ambient term.

Source: W3C WCAG 2.1 — Contrast (Minimum)

Worked examples

Example 1
Black on white
Inputs:
fg=#000000, bg=#ffffff
Output:
21:1 — passes everything
Example 2
#777 on white
Inputs:
fg=#777777, bg=#ffffff
Output:
4.48:1 — fails AA normal (just under 4.5)
Example 3
#1a73e8 on white
Inputs:
fg=#1a73e8, bg=#ffffff
Output:
4.51:1 — passes AA normal

Limitations

  • Uses WCAG 2.1 luminance; the newer APCA model (WCAG 3 draft) differs.
  • Assumes opaque colors — alpha/transparency is not composited.
  • Contrast is one of several accessibility considerations.

Computed per the official WCAG 2.1 formula.

Frequently asked

What is a good color contrast ratio?+
For normal body text, aim for at least 4.5:1 to meet WCAG AA, the most common standard. 7:1 meets the stricter AAA level. Large text (24px regular or 18.66px bold) can pass AA at 3:1 and AAA at 4.5:1.
How is the contrast ratio calculated?+
It is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Luminance is computed by linearizing each RGB channel and weighting them 0.2126 (R), 0.7152 (G), 0.0722 (B).
What counts as "large text" in WCAG?+
Text that is at least 18 point (about 24px) at normal weight, or at least 14 point (about 18.66px) when bold. Large text has lower contrast requirements because bigger letterforms remain legible at lower contrast.
What is the difference between AA and AAA?+
AA is the widely adopted baseline (and the level most laws reference), requiring 4.5:1 for normal text. AAA is the enhanced level requiring 7:1, recommended where the highest accessibility is needed but not always achievable for every design.
Does contrast apply to icons and UI elements?+
Yes. WCAG 2.1 requires a 3:1 contrast ratio for graphical objects and user-interface components (like icons, form borders, and focus indicators) against adjacent colors, so they remain perceivable.
Is high contrast always better?+
Generally higher contrast aids legibility, though some users with conditions like Irlen syndrome find pure black on pure white harsh. Meeting the WCAG minimums is the goal; extreme maximal contrast everywhere is not required.

Related calculators

Hex / RGB / HSL Color Converter
Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.
Color Palette Generator
Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.
Tip Split Calculator
Compute tip and split a restaurant bill evenly among diners.
Fuel vs Electric Car Cost Comparison
Annual fuel cost (gas car) vs annual electricity cost (EV) for the same mileage.
EV Charging Cost Calculator
Cost per session: kWh delivered × $/kWh, accounting for charger efficiency.
Solar Panel Payback Period
System cost / annual savings = years to break even on a residential solar install.

More tools you might like

Hand-picked tools that pair well with this one — same audience, same intent.

Hex / RGB / HSL Color Converter
Calc

Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.

Color Palette Generator
Calc

Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.

Color Picker (hex / rgb / hsl / hwb)
Calc

Convert a color between hex, RGB, HSL, HWB, and CMYK. Reports relative luminance and WCAG 2.2 contrast ratio against white and black.

Color Contrast Checker
PDF

Sample text-run and background colors across a PDF and flag pairs that fall below WCAG-AA contrast ratios.

CAC vs LTV Ratio
Calc

LTV / CAC ratio. Healthy SaaS: 3:1+; under 1:1 burns money.

Hex / Binary / Octal / Decimal Converter
Calc

Convert numbers between hexadecimal, binary, octal, and decimal. Shows the bit pattern grouped by nibble + the two’s-complement representation for negative values.