🧰Locly

Check Color Contrast for WCAG

Measure foreground/background contrast against WCAG AA and AAA

Contrast ratio

18.88:1

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass

Sample body text

Sample large text

The quick brown fox jumps over the lazy dog. 0123456789

Thresholds follow WCAG guidance for relative luminance. This tool does not certify legal accessibility compliance.

About This Tool

Contrast Checker calculates the WCAG contrast ratio between foreground and background colors and shows whether common AA/AAA thresholds pass for normal and large text. Math is processed locally in your browser. Results are guidance, not a legal compliance certificate.

How to Use

  1. Pick or paste a foreground color
  2. Pick or paste a background color
  3. Read the contrast ratio
  4. Check AA/AAA pass marks
  5. Adjust colors until the needed level passes

Common Use Cases

  • UI button and label colors
  • Website body text checks
  • Design system audits
  • Slide deck readability
  • Brand palette screening

FAQ

Q1: What is AA vs AAA?

AA requires at least 4.5:1 for normal text (3:1 for large). AAA is stricter: 7:1 normal and 4.5:1 large.

Q2: What counts as large text?

WCAG treats about 18pt+ regular or 14pt+ bold as large text. This tool uses that guidance.

Q3: Does a Pass mean fully accessible?

No. Contrast is one factor. This tool does not certify complete WCAG compliance.

Q4: Are colors uploaded?

No. Calculations are processed locally in your browser.

Q5: Which formula is used?

Relative luminance and contrast ratio from WCAG 2.x.

Related Tools

Color ConverterColor Palette