01
When this tool is useful
Use this before shipping foreground and background colors for body text, labels, or buttons. Enter two HEX colors to see their contrast ratio and the normal-text and large-text threshold results.
Color contrast checker
Check normal and large text contrast from foreground and background colors.
Color contrast checker
A browser-side result for planning and reference.
What to check before using it
02
How the result is produced
The calculation linearizes sRGB channels, derives relative luminance, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. It compares the ratio with 3:1, 4.5:1, and 7:1 text thresholds.
03
Worked example and interpretation
Entering foreground #111111 on background #FFFFFF produces a high ratio. Check AA normal first for small body copy; for a combination reserved for large headings, also read the AA large result.
04
Scope and limitations
Passing a ratio does not complete an accessibility review. Test real font size and weight, interactive states, text placed over images, and any information communicated by color alone.
Frequently asked questions
How do I move a color from Color contrast checker into another app?
Use the copy button below the result to copy CSS, HEX, or HSL text. Confirm that the destination app interprets the same color format.
Will a screen color from Color contrast checker match print?
Not automatically. Emissive RGB screens and reflective paper and ink use different gamuts and mixing models, so print profiles and proofs are still needed.
Can I approve a design token from Color contrast checker alone?
Use it as a candidate, then test the real background, dark mode, interaction states, and text contrast before naming and approving a token.