NextTool

Contrast Checker

How to use

Checks the contrast ratio between a foreground and background color against WCAG accessibility guidelines, showing pass/fail for AA and AAA levels on both normal and large text, with a live text preview.

Color & CSSLocal only

Colors

Foreground (Text)

Background

Sample Large Text

The quick brown fox jumps over the lazy dog. This is normal-sized sample text.

Contrast Ratio

18.88:1
Normal Text AAPass
Normal Text AAAPass
Large Text AAPass
Large Text AAAPass
When to use this
  • Verifying body text and background color choices meet WCAG AA before launching a website
  • Auditing an existing design system's color pairs for accessibility compliance
  • Choosing a readable text color for a button or badge against a brand background color
  • Checking whether a design passes AAA for a project with stricter accessibility requirements

Free and private. Everything runs on your own device, with no account and no uploads.

This tool calculates the WCAG contrast ratio between a foreground text color and a background color, then checks it against the AA and AAA thresholds for both normal and large text. It is essential for making sure your website or app text is readable and meets accessibility standards before you ship a design. The ratio and live text preview update as you adjust either color, all computed locally in your browser.

Normal text needs a ratio of at least 4.5:1, while large text needs at least 3:1 to pass WCAG AA.

AAA is stricter, requiring at least 7:1 for normal text and 4.5:1 for large text.

It uses the WCAG relative luminance formula for both colors and computes the ratio between the lighter and darker luminance values, exactly as specified in the accessibility guidelines.

WCAG generally defines large text as 18pt (24px) regular or 14pt (18.66px) bold and larger, which is why it has a lower required contrast ratio.

How it works
  1. 1

    Set the foreground color

    Choose the text color using the picker or HEX input.

  2. 2

    Set the background color

    Choose the background color the text will sit on.

  3. 3

    Check the live preview

    See sample large and normal text rendered with your chosen colors.

  4. 4

    Review the pass/fail results

    Check the contrast ratio against AA and AAA thresholds for both text sizes.

More in Color & CSS
Color Converter
Convert colors between HEX, RGB and HSL formats
Gradient Generator
Build CSS linear and radial gradients visually and copy the CSS code
Palette Generator
Generate harmonious color palettes from a seed color with multiple harmony rules
Read about this
Gradients and palettes: why yours goes grey in the middle4 minColour contrast: what the WCAG numbers mean and how to hit them3 min
Pro tips
  • ·Large, bold headings can pass at a lower ratio than body copy, so check both text sizes rather than assuming one result covers all cases.
  • ·If a pair fails, try darkening the text or lightening the background slightly rather than switching hues entirely.
  • ·Don't rely on color contrast alone for accessibility, pair it with sufficient font size and weight for real-world readability.