Navigation

Color Contrast Checker

Check contrast between two opaque HEX colors.

Help & examples All tools

Compare two opaque six-digit HEX colors. Thresholds use the full ratio before display rounding.

Contrast ratio

17.93:1

Large bold text

Normal text sample at full opacity.

  • AA Normal Text (at least 4.5:1)PASS
  • AA Large Text (at least 3:1)PASS
  • AAA Normal Text (at least 7:1)PASS
  • AAA Large Text (at least 4.5:1)PASS
  • UI Components (at least 3:1)PASS

Large text means at least 18 pt regular or 14 pt bold. These color checks do not certify a whole interface's accessibility.
Design Tools Local processing
Share

Last reviewed: · Testing methodology

How to use

Enter foreground and background colors for a ratio and text-size threshold checks.

1

Enter the pair

Use six-digit opaque HEX foreground and background values.

2

Read the ratio

The preview uses those exact opaque colors. Invalid edits remove the current verdict.

3

Check the text size

Review normal-text, large-text and UI-component thresholds. Decisions use the unrounded ratio.

Examples and checks

Example

Black text on a white background gives the maximum ratio.

Input
#000000 and #ffffff
Output
21:1

Limits and questions

Inputs are processed in your browser. Analytics and advertising can make separate network requests.

How this tool works

The sRGB luminance formula produces a ratio. Full precision determines each threshold; the visible ratio rounds to two decimals.

Limits and troubleshooting

Use the final composited opaque colors. Correct invalid HEX before reading results.

Verification

Review record: 2026-08-26. See the documented behavior and limitations above, and the testing standards for the scope of review.

Testing methodology

When to use another workflow

Use browser accessibility tooling and manual testing for gradients, opacity, images, forced-colors mode, and complete interface audits.

Frequently asked questions

What counts as large text?
At least 18 pt regular or 14 pt bold under the contrast criteria.
Does a passing pair certify my page?
No. These checks concern the entered opaque pair. They do not assess other states, transparency, images, focus visibility or the whole interface.

Understand your result