Skip to main content
CompressNConvert

Color Contrast Checker

Check text and background contrast against WCAG AA and AAA thresholds. Preview text sizes, explore suggested color fixes, and compare APCA scores.

Runs locally in your browser

Text color

Saturation 55 percent, brightness 20 percent, hue 221 degrees.

Background color

Saturation 0 percent, brightness 100 percent, hue 0 degrees.

12px regular — the quick brown fox jumps over the lazy dog.

16px regular — the quick brown fox jumps over the lazy dog.

19px bold — the quick brown fox jumps over the lazy dog.

24px regular — the quick brown fox jumps over the lazy dog.

36px bold — the quick brown fox jumps over the lazy dog.

Filled buttonOutlined button

WCAG 2.1 / 2.2 contrast ratio

16.27:1

Clears AAA for normal text.

APCA lightness contrast

Lc 103.2

Dark text on light. Comfortable for body text at any weight, including small sizes.

WCAG 2.1 / 2.2 results

  • AA normal text

    Text below the large-text size threshold. Needs 4.5:1.

    Pass

  • AA large text

    At least 24px, or about 18.67px bold. Needs 3:1.

    Pass

  • AA interface

    Required visual boundaries, icons, and states against adjacent colors. Needs 3:1; exceptions apply.

    Pass

  • AAA normal text

    Enhanced body copy. Needs 7:1.

    Pass

  • AAA large text

    Enhanced headings. Needs 4.5:1.

    Pass

Color vision check

The same pair as it appears to readers with each type of color vision deficiency.

  • Sample text

    Typical vision

    16.27:1 · Unmodified reference

  • Sample text

    Deuteranomaly

    16.40:1 · Fixed 0.6-severity simulation

  • Sample text

    Deuteranopia

    16.43:1 · Red-green simulation

  • Sample text

    Protanomaly

    16.10:1 · Red-green simulation

  • Sample text

    Protanopia

    15.91:1 · Red-green simulation

  • Sample text

    Tritanomaly

    16.18:1 · Fixed 0.6-severity simulation

  • Sample text

    Tritanopia

    16.19:1 · Illustrative simulation

  • Sample text

    Achromatomaly

    16.27:1 · Illustrative simulation

  • Sample text

    Achromatopsia

    16.29:1 · Illustrative simulation

Complete tool guide

Color Contrast Checker guide

Check the contrast ratio between an opaque text color and its background. The WCAG results compare the pair with AA and AAA thresholds used in WCAG 2.1 and 2.2. The separate APCA score is supplementary information, not a WCAG 2.x conformance result.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

  • See which text-size thresholds your color pair meets.
  • Preview text at different sizes and weights before assigning a token.
  • Explore lightness adjustments when a body-text pair falls below 4.5:1.

Common use cases

  • Reviewing body text, headings, captions, and placeholder text.
  • Checking colors used to identify controls, icons, and interactive states.
  • Finding a nearby color for a failing text/background pair.

How to use it

  1. 1

    Pick the text and background colors, or paste values you already have.

  2. 2

    Read the WCAG ratio and the APCA lightness contrast score.

  3. 3

    Check the sample block at the size and weight you actually plan to use.

  4. 4

    If the pair fails, apply one of the suggested passing colors.

Controls and results explained

WCAG ratio

The ratio ranges from 1:1 for equal luminance to 21:1 for black and white. A displayed rounded value is for reading; pass/fail uses the unrounded ratio.

Text size and weight

Compare normal and large text thresholds. Large text is at least 24 CSS pixels, or about 18.67 CSS pixels when bold. Selecting a sample size changes the preview, not the colors.

Suggested fixes

Suggestions adjust lightness while trying to retain the hue. They target 4.5:1 for normal text at AA, not every accessibility requirement.

Worked examples

A pair that passes AAA normal text

Start with: Black text #000000 on white #FFFFFF

  1. Set the text to #000000 and the background to #FFFFFF.
  2. Read the ratio and the normal-text badges.
21.00:1 — passes AA and AAA normal text

This is the maximum WCAG contrast ratio. It does not, by itself, validate the rest of a page.

A pair that fails AA normal text

Start with: Gray text #777777 on white #FFFFFF

  1. Set the text to #777777 and the background to #FFFFFF.
  2. Compare normal and large text results, then try a suggested fix.
4.48:1 — fails AA normal text; passes AA large text

A ratio below 4.5:1 fails the normal-text threshold even when it looks close. Retest a suggested color against its intended background.

AA and AAA text thresholds

AA text needs 4.5:1, or 3:1 for large text. AAA text needs 7:1, or 4.5:1 for large text. Check the applicable threshold before choosing a pair.

Controls, graphics, and exceptions

WCAG 1.4.11 generally requires 3:1 against adjacent colors for visual information needed to identify controls, states, and meaningful graphics. Decorative borders are not automatically subject to this rule. Inactive controls are exempt from these contrast requirements; placeholder text in an active input is not.

APCA and conformance

The APCA Lc sign indicates dark-on-light or light-on-dark polarity. Its interpretation depends on typography and the APCA version. Treat the tool’s size hints as approximate. WCAG 3 is under development; an APCA score does not establish WCAG 2.1 or 2.2 conformance.

Practical tips for better results

  • Check default, hover, focus, and selected states against their actual adjacent backgrounds.
  • Use labels, shapes, or underlines as well as color to communicate meaning.
  • Test text over images and gradients where the background contrast is weakest.

Frequently asked questions

Does passing this checker make my website WCAG compliant?

No. It checks color pairs against selected contrast thresholds. WCAG conformance also depends on keyboard access, structure, text alternatives, focus behavior, and other criteria.

Does transparency affect the result?

The checker evaluates opaque RGB colors. For translucent text or backgrounds, determine the composited color over the actual backdrop and test that pair.

Should I use WCAG or APCA?

Use the WCAG thresholds for WCAG 2.x contrast checks. APCA is an additional typography-dependent signal and is not a replacement for those requirements.

What to check before using the result

  • The interface check evaluates a pair, not the geometry or visibility of an entire focus indicator.
  • A simulation or ratio cannot replace testing the actual interface with its fonts, states, images, and user settings.

Keep working

Related color & design

Continue with another focused tool from the same collection.

Color Picker and ConverterPick a color visually and convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.Color Blindness SimulatorSee palettes, interfaces, and images through eight types of color vision.Color Palette GeneratorGenerate coordinated palettes from harmony rules, then lock and export them.Color Scale GeneratorTurn one brand color into a balanced 50 to 950 ramp with contrast checked.