Color Picker & Contrast Checker

Pick and convert colors between HEX, RGB, and HSL, and check the WCAG contrast ratio between a text and background color. Runs entirely in your browser.

Text color

Background color

Large text sample

Normal-size text sample for readability.

Contrast ratio
AA. Normal text (4.5:1)
AAA. Normal text (7:1)
AA. Large text (3:1)
AAA. Large text (4.5:1)

What can you check?

HueCheck picks and converts a color between HEX, RGB, and HSL, and checks the contrast ratio between two colors against the WCAG 2.x accessibility thresholds. Useful for choosing text and background colors that are readable for people with low vision, or for verifying a design meets accessibility requirements before shipping.

Curious where the 4.5:1 threshold comes from? Read WCAG Contrast Ratios Explained.

How it works

Edit either color using the swatch picker or by typing directly into the HEX, RGB, or HSL field. All three stay in sync. The contrast ratio is calculated using the official WCAG relative luminance formula, entirely in your browser, so nothing is ever sent to a server.

Frequently asked questions

Is this free to use?

Yes. There's no sign-up and no limit on how many colors you check.

Do you store the colors I pick?

No. Everything is calculated entirely client-side in your browser. See the privacy policy for details.

What contrast ratio do I need to pass WCAG?

For normal text, WCAG AA requires at least 4.5:1 and AAA requires 7:1. For large text (18pt+, or 14pt+ bold), AA requires 3:1 and AAA requires 4.5:1.

How is the contrast ratio calculated?

Using the WCAG 2.x formula: each color's relative luminance is calculated from its sRGB values, and the ratio is (lighter + 0.05) / (darker + 0.05).