DevConvertor

Color Contrast Checker

Enter any two colours as hex, RGB, or HSL — or pick them — and get the exact WCAG contrast ratio, plus pass/fail results for AA and AAA at normal and large text sizes and for UI components. Uses the WCAG relative luminance formula, so the result matches what an accessibility audit will report.

WCAG 2.2 contrast ratio

Converted values

Foreground#1a1a1argb(26, 26, 26)hsl(0, 0%, 10%)
Background#ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)
Large text sampleNormal body text sample — 16px.Small caption text sample.

17.40:1

contrast ratio (1:1 identical → 21:1 black on white)

WCAG results

AA — normal textneeds 4.5:1Pass
AA — large text (18pt / 14pt bold)needs 3:1Pass
AAA — normal textneeds 7:1Pass
AAA — large textneeds 4.5:1Pass
UI components & graphics (1.4.11)needs 3:1Pass

ReadyColor ToolsFree · No account required

Related tools

Color PickerPick a color and convert it between HEX, RGB, HSL, and OKLCH.Color Palette GeneratorGenerate monochromatic, analogous, complementary, and other palettes.Gradient GeneratorBuild linear, radial, and conic CSS gradients visually.

Features

  • Hex, RGB, and HSL input, plus a native colour picker
  • Exact WCAG contrast ratio using the relative luminance formula
  • AA and AAA results for normal text, large text, and UI components
  • Live preview of the pair, and one-click swap
  • Each colour converted to hex, RGB, and HSL

How to use

  1. Enter or pick a foreground and background colour.
  2. Read the ratio and the pass/fail rows.
  3. Adjust until the pair meets the level you need.

Example

Black on white is 21:1 — the maximum. #767676 on white is 4.54:1, which passes AA for normal text by a small margin; #777777 is 4.48:1 and fails.

FAQ

What counts as large text?
18pt and above, or 14pt and above if bold — roughly 24px and 18.66px at default browser settings. Large text only needs 3:1 for AA, where normal text needs 4.5:1.
Why does the ratio use a formula instead of comparing brightness?
Because perceived brightness isn't linear, and channels don't contribute equally — green dominates, blue barely registers. WCAG's relative luminance formula linearises each sRGB channel and weights them (0.2126 R, 0.7152 G, 0.0722 B), which is why a mid-grey and a saturated yellow that look similarly bright score very differently.
What is the UI components rule?
WCAG 2.1 success criterion 1.4.11 requires 3:1 contrast for the parts of a control that identify it — borders, icons, focus indicators, chart strokes. Text-only checks miss these, which is a common audit failure.
Does it account for opacity?
No. Alpha is parsed but ignored, because the real contrast depends on whatever sits behind the translucent layer. Composite the colour against its actual backdrop first, then check the resulting solid colour here.