belun.app Blog

Color Contrast Checker — Test WCAG AA & AAA Compliance

Large text — 24px bold headline

Normal text — this is what body copy at 14–16px looks like with your color pair. If you can read this comfortably, your users probably can too.

Contrast ratio
—
AA — normal text
Requires 4.5:1
AA — large text
Requires 3:1
AAA — normal text
Requires 7:1
AAA — large text
Requires 4.5:1
UI components & graphics
Requires 3:1 (WCAG 1.4.11 non-text contrast)

Pick a text color and a background color to see their contrast ratio instantly, with pass/fail results for every WCAG level: AA and AAA, normal and large text, plus the 3:1 requirement for UI components. Everything runs in your browser — nothing is uploaded.

How it works

  1. 1
    Pick your two colors Use the color pickers or type HEX values (e.g. #1a1a2e) for the text color and the background color. rgb(r, g, b) values work too.
  2. 2
    Read the contrast ratio The ratio updates as you type, and the preview shows your actual color pair applied to sample text at normal and large sizes.
  3. 3
    Check the pass/fail results Each WCAG requirement shows a Pass or Fail badge. Aim for AA (4.5:1) as a minimum for body text; AAA (7:1) for maximum readability.

Your data stays private

All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.

Frequently asked questions

What contrast ratio does WCAG require?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Interface components like buttons, borders, and icons need at least 3:1 against adjacent colors.
What counts as large text?
Text that is at least 24px (18pt) regular weight, or at least 18.66px (14pt) bold. Everything smaller is normal text and must meet the stricter 4.5:1 (AA) or 7:1 (AAA) thresholds.
How is the contrast ratio calculated?
It follows the WCAG 2 formula: each color is converted to relative luminance, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result ranges from 1:1 (identical colors) to 21:1 (black on white).
Should I aim for AA or AAA?
AA is the level most accessibility laws and standards reference (including WCAG-based regulations like the European Accessibility Act and ADA guidance). AAA is worth targeting for body text on content-heavy pages, but it is not always practical for brand colors.
Does this tool work with transparency (alpha)?
No — contrast is defined for opaque colors. If your text or background uses transparency, first work out the effective color after blending with what is behind it, then test that flattened color here.
Is my color data uploaded anywhere?
No. The calculation is a few lines of math that run entirely in your browser. Nothing you enter leaves your device.

From the blog

WCAG Color Contrast Explained: Ratios, Levels, and How to Pass What the 4.5:1 and 7:1 contrast ratios actually mean, who sets them, and how to fix a failing color pair without redesigning your brand. Read the post →

Related tools

Color Converter Convert colors between HEX, RGB, HSL, and HSV formats. CSS Gradient Generator Build linear and radial CSS gradients visually. CSS Box Shadow Generator Build box-shadow code visually with offset, blur, and layers. Favicon Generator Generate favicons from text or an image in every size.