N
NJHTools

Color Contrast Checker

Check the WCAG contrast ratio between a text color and a background, and see instantly whether it passes AA and AAA — entirely in your browser.

7.58:1

Contrast Ratio

The quick brown fox jumps over the lazy dog.

Normal body text at this size demonstrates how readable the foreground color is on the chosen background.

WCAG Compliance

AA — Normal text

Requires 4.5:1

Pass

AA — Large text

Requires 3:1

Pass

AAA — Normal text

Requires 7:1

Pass

AAA — Large text

Requires 4.5:1

Pass

How to check color contrast

  1. Enter your text color and background color using the pickers or by typing a HEX or RGB value.
  2. Read the contrast ratio (shown as X.XX:1) and the live preview of sample text.
  3. Check the AA and AAA badges for normal and large text to confirm accessibility compliance.
  4. Use the swap button to flip the two colors.

WCAG defines large text as at least 18.66px bold or 24px regular. AA requires a 4.5:1 ratio for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. Everything is computed locally — no color data is ever sent to a server.

Related Tools

Color ConverterCSS Gradient GeneratorCSS Box Shadow GeneratorCSS Border Radius Generator

Frequently Asked Questions

What is a good color contrast ratio?↓

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. A higher ratio means better readability, especially for users with low vision.

How is the contrast ratio calculated?↓

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Relative luminance is computed from the sRGB red, green, and blue channels using the official WCAG formula, with each channel gamma-corrected before being weighted.

What counts as large text in WCAG?↓

WCAG defines large text as at least 18.66px (14pt) bold, or at least 24px (18pt) regular. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because larger letterforms remain legible at lower contrast.

What is the difference between WCAG AA and AAA?↓

AA is the most commonly required conformance level for legal and accessibility compliance and asks for 4.5:1 (normal) and 3:1 (large). AAA is the highest level, requiring 7:1 (normal) and 4.5:1 (large), and is often used for content aimed at users with significant visual impairments.

Is this contrast checker free and private?↓

Yes. The Color Contrast Checker is completely free with no signup required, and it runs 100% locally in your browser. No color data is ever uploaded to or stored on any server.

Last updated: