Contrast checker

Check color pairs against WCAG text thresholds.

Text color

Background color

Aa · 18.75:1

Small details make a big difference.

This preview uses your selected colors.

PassAA normal text · 4.5:1

PassAA large text · 3:1

PassAAA normal text · 7:1

PassAAA large text · 4.5:1

Contrast report

Text: #ffffff
Background: #101216
Contrast: 18.7477:1
AA normal text: Pass
AA large text: Pass
AAA normal text: Pass
AAA large text: Pass

137 characters

About Contrast checker

Test whether a text color has enough contrast against its background under the supported WCAG contrast calculation. Use the same colors that will actually appear in the interface.

Steps, example, and limitations

How to use it

Enter the foreground and background colors.
Review the contrast ratio and the normal- and large-text results.
Adjust the colors and check the sample again.

Example

Input

Foreground: #000000
Background: #ffffff

Result

Contrast ratio: 21:1

Things to know

Contrast is one part of accessibility, not a complete accessibility audit.
Transparency, background images, text size, and font weight can affect the real use case. Test the final rendered design too.