ClarityKitFind a tool
Text utilities

Color Contrast Checker

Check the WCAG contrast ratio between two solid hex colors.

Text stays in your browserCopy your result

Input workspace

Runs on your device

OUTPUT WORKSPACE

Your result

Let’s calculate.

Use the Calculate button to see your result.

Your content is processed locally.

How to use this tool

  1. Enter text color (#rrggbb), background color (#rrggbb).
  2. Select Update result to view the result.
  3. Check the method and assumptions below before using the result.

The method, explained

Convert sRGB channels to linear values, calculate relative luminance, then divide (lighter + 0.05) by (darker + 0.05).

A WORKED EXAMPLE

Black on white has a contrast ratio of 21:1.

What to keep in mind

Solid opaque colors only. Large text means at least 18 pt, or 14 pt bold. Contrast alone does not establish full accessibility.

Common questions

How does this tool handle my input?

Processing happens in your browser. Your pasted content is not uploaded, included in URLs or stored as a calculation history.

What input should I use?

Text color (#RRGGBB): use the example already shown, then replace it with your own content. Solid opaque colors only. Large text means at least 18 pt, or 14 pt bold. Contrast alone does not establish full accessibility.

Methodology maintained by ClarityKit. How these tools are built and checked.