How is the contrast ratio computed?

Per WCAG 2.2 §1.4.3: compute relative luminance L using sRGB linearisation, then contrast = (L_brighter+0.05)/(L_darker+0.05). Threshold: ≥4.5 for AA, ≥7 for AAA.

Why is CMYK only approximate?

CMYK is device-dependent — the actual ink mix depends on the press, paper, and ICC profile. Use a real CMYK profile for print colour matching.

What is the WCAG contrast threshold for UI components?

WCAG 2.2 §1.4.11 requires 3:1 minimum contrast for non-text components (form borders, icons, focus rings).

Does this match what my browser displays?

Yes — the conversions use the canonical W3C / CIE formulae implemented by every modern browser CSS engine.

How is the contrast ratio computed?

Per WCAG 2.2 §1.4.3: compute relative luminance L using sRGB linearisation, then contrast = (L_brighter+0.05)/(L_darker+0.05). Threshold: ≥4.5 for AA, ≥7 for AAA.

Why is CMYK only approximate?

CMYK is device-dependent — the actual ink mix depends on the press, paper, and ICC profile. Use a real CMYK profile for print colour matching.

What is the WCAG contrast threshold for UI components?

WCAG 2.2 §1.4.11 requires 3:1 minimum contrast for non-text components (form borders, icons, focus rings).

Does this match what my browser displays?

Yes — the conversions use the canonical W3C / CIE formulae implemented by every modern browser CSS engine.

Color Picker (hex / rgb / hsl / hwb)

Convert a color between hex, RGB, HSL, HWB, and CMYK. Reports relative luminance and WCAG 2.2 contrast ratio against white and black.

Result

#1A8FE3

rgb(26, 143, 227)

Relative luminance L = 0.2541 per WCAG 2.2.

Hex#1A8FE3
RGBrgb(26, 143, 227)
HSLhsl(205 79% 50%)
HWBhwb(205 10% 11%)
CMYKcmyk(89% 37% 0% 11%)
Luminance (WCAG 2.2)0.2541
Contrast vs white3.45:1 (AA large only)
Contrast vs black6.08:1 (AA)

Source: WCAG 2.2 §1.4.3 — Contrast (Minimum); CSS Color Module Level 4.

Note — Contrast ratios are display-gamut dependent; values are exact only for an sRGB display.

Step-by-step

Normalise inputs to integer RGB triple (0-255).
Convert to HSL via the standard chroma/lightness formula; HWB = (hue, min, 1-max).
Relative luminance: L = 0.2126·R’ + 0.7152·G’ + 0.0722·B’ with sRGB linearisation; contrast = (L1+0.05)/(L2+0.05).

How to use this calculator

Pick an input format.
Read the equivalent representations in the breakdown.
Use the contrast rows to check WCAG AA (≥4.5:1) or AAA (≥7:1) against your background.

About this calculator

Designers move between hex, RGB, HSL, and HWB depending on context — hex for code, RGB for raster pipelines, HSL for theme tokens, HWB for accessible-design tooling. This converter does all four at once and adds the CSS-modern CMYK approximation plus the WCAG-2.2 contrast ratio against pure white and pure black. The luminance is computed exactly the way browsers and accessibility checkers do it, so the contrast numbers match what axe, Lighthouse, and Stark will report.

How it works — the formula

L = 0.2126·R’ + 0.7152·G’ + 0.0722·B’ (sRGB linear)
contrast = (max(L1,L2)+0.05) / (min(L1,L2)+0.05)

The CIE luminance weights match human luminous-efficiency sensitivity. The +0.05 offset prevents division-by-zero and matches CRT ambient-light assumptions baked into the WCAG formula.

Sources: W3C WCAG 2.2 §1.4.3 · CSS Color Module Level 4 · IEC 61966-2-1 — sRGB colour space

Worked examples

Example 1

Brand blue #1A8FE3

Inputs:: hex=#1A8FE3
Output:: rgb(26,143,227), hsl(207 78% 50%)

Example 2

Pure white

Inputs:: hex=#FFFFFF
Output:: L=1.0, contrast vs black = 21.00:1 (AAA)

Example 3

Mid-gray #808080

Inputs:: hex=#808080
Output:: L≈0.216, contrast vs white = 3.95:1

Limitations

CMYK is uncalibrated — use a colour-managed profile for print.
WCAG contrast is sRGB-display-targeted.
No APCA (WCAG 3 draft) contrast model.

Conversions use standard W3C / CIE / sRGB formulae and match browser-native colour-conversion behaviour.

Frequently asked

HSL parameterises a colour by lightness (0=black, 1=white) with saturation as a separate axis. HWB uses whiteness (how much white is mixed in) and blackness (how much black) — it is easier to reason about in design tooling.