How much contrast is enough?

WCAG AA asks for 4.5:1 on body text and 3:1 on large text (roughly 18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1. The tool shows the ratio against both white and black text so you can judge while choosing.

Can I sample a colour from the screen?

Browsers that support the EyeDropper API, such as desktop Chrome and Edge, get a sampling button that picks any pixel on screen. Elsewhere the panel and the value field still work, so nothing is lost.

CSS / FRONTEND · RUNS IN YOUR BROWSER

Online Colour Picker

Pick a colour on the wheel and get HEX, RGB, HSL, and contrast at once.

Everything is computed in the browser and no picked colour is stored. Contrast uses the WCAG 2.1 relative luminance formula.

Preview

Preview backdrop

LightDarkTransparent

White text 4.4:1Black text 4.77:1

Formats

HEX#785dfc
RGBrgb(120, 93, 252)
HSLhsl(250, 96%, 68%)

Text contrast

White text4.4:1Below AA
Black text4.77:1Passes AA

Colour value

Drag on the panel to set saturation and brightness; the sliders below do the same from the keyboard.

Hue

Saturation

Brightness

Scale

Tints

Shades

About this tool

Drag on the saturation panel to set saturation and brightness, use the hue slider for the hue, and read the HEX, RGB, and HSL forms side by side. The tool also reports the contrast ratio of the colour against white and black text, so legibility is visible while you choose rather than after the fact, and it derives five tints and five shades you can lift straight into a scale.

How it works

Click or drag on the panel to choose a colour.
Fine-tune with the hue slider, or paste an existing HEX, RGB, or HSL value.
Copy the format you need, or take a tint or shade from the derived scale.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

How much contrast is enough?: WCAG AA asks for 4.5:1 on body text and 3:1 on large text (roughly 18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1. The tool shows the ratio against both white and black text so you can judge while choosing.
Can I sample a colour from the screen?: Browsers that support the EyeDropper API, such as desktop Chrome and Edge, get a sampling button that picks any pixel on screen. Elsewhere the panel and the value field still work, so nothing is lost.

← All CSS / Frontend tools