Color Converter
Convert a colour between hex, RGB, HSL and CMYK, then check its WCAG 2.2 contrast ratio against a background. Shows whether text passes AA and AAA at both normal and large sizes.
Color Converter
Results recalculate instantly on every keystroke. Nothing you type is transmitted.
What this result does not account for
- CMYK output is arithmetic, not colour-managed, and is not a substitute for a press proof.
- Contrast is computed for two flat, fully opaque colours. Transparency, gradients and images are not modelled.
- The sRGB colour space is assumed, which is correct for the web but not for wide-gamut Display P3 assets.
In short: Hex, RGB and HSL are three ways of writing the same sRGB colour and convert between each other exactly. Contrast is different: it depends on relative luminance, so it must be computed by linearising each channel first — two colours that look clearly different can still fail an accessibility check.
Formula
L = 0.2126·R + 0.7152·G + 0.0722·B
Clin = C/12.92 if C ≤ 0.04045, else ((C+0.055)/1.055)2.4
ratio = (Llight + 0.05) ÷ (Ldark + 0.05)
[('C', 'one sRGB channel scaled to the range 0 to 1'), ('Clin', 'that channel linearised, undoing display gamma'), ('L', 'relative luminance, 0 for black and 1 for white'), ('0.05', 'a flare constant that keeps the ratio finite at black'), ('ratio', 'runs from 1:1 for identical colours to 21:1')]
Worked Example
- Expand any shorthand hex by doubling each digit, then split the six digits into three one-byte channels.
- Scale each channel to 0-1 and linearise it with the sRGB transfer function — this undoes the gamma encoding a display applies.
- Weight the linear channels 0.2126 red, 0.7152 green, 0.0722 blue and sum them to get relative luminance.
- Do the same for the background colour.
- Divide the lighter luminance plus 0.05 by the darker plus 0.05, then compare against 4.5:1 for AA or 7:1 for AAA at normal size.
Mid-grey #767676 on white measures 4.5422:1 and passes AA for normal text. Lighten it by a single step to #777777 and it drops to 4.4781:1, which fails — a change invisible to the eye and decisive to the audit. That knife edge is why contrast must be computed rather than judged by looking.
Strengths & Limits Of This Model
Where this engine is strong
- Implements the WCAG 2.2 formula exactly, including the 0.04045 breakpoint
- Tests AA and AAA at both text sizes in one pass
- Suggests the better background and names lightness as the lever
Where it stops
- No alpha compositing
- CMYK is indicative only, not a profile
Practical Use Cases
Auditing a brand palette
Establishing which brand colours can legally carry body text and which are decoration only.
Choosing a link colour
Finding a colour that clears 4.5:1 on the page background before it ships.
Converting for print
Reading an approximate CMYK breakdown of a screen colour ahead of a proof.
Building a tint scale
Holding hue and saturation fixed in HSL while stepping lightness to generate a consistent ramp.
Answering an accessibility finding
Producing the measured ratio and the level it fails, rather than an opinion about legibility.
Methodology & Editorial Standards
Relative luminance follows the WCAG 2.2 definition exactly: each sRGB channel is scaled to 0-1, linearised at the 0.04045 breakpoint with the 2.4 exponent, then weighted 0.2126, 0.7152 and 0.0722. The contrast ratio adds the 0.05 flare constant to both luminances, which is what bounds the scale at 21:1. HSL conversion is exact and round-trips back to the identical RGB triple. CMYK is the naive device-independent conversion and is labelled as an approximation because no browser-side computation can account for an ICC print profile.
Computation runs in IEEE-754 double precision at full internal precision; rounding to two decimal places occurs strictly at the display layer, so no cumulative drift enters the result. All monetary outputs use accounting presentation — grouped thousands, two decimals, negatives in parentheses — so figures can be transcribed directly into a model or working paper. Division-by-zero and out-of-domain inputs return an em-dash rather than a misleading number.
This engine was reconciled against an independent reference implementation and hand-verified for the worked example above before release. Our full five-stage review process is published on the About Us page.
Disclaimer. This calculator is provided for informational and modelling purposes only and does not constitute financial, tax, legal, medical, or engineering advice. Verify all figures with a qualified professional before acting on them.
Color Converter — 11 Expert FAQs
11 analyst-written answers to the questions practitioners actually ask — optimised for voice and answer-engine retrieval.
What contrast ratio do I actually need?
WCAG 2.2 sets 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at AAA. Large means 18pt, or 14pt when bold. Interface components and meaningful graphics need 3:1. AA is the level most legislation references.
Why do two obviously different colours fail contrast?
Because contrast is measured on luminance, not on hue difference. Red and green are opposites on the colour wheel yet can sit at almost the same luminance, so the ratio collapses even though the colours look nothing alike. This is also why colour must never be the only way information is conveyed.
Is the contrast ratio symmetric?
Yes. Swapping foreground and background gives the same number, because the formula always divides the lighter luminance by the darker. WCAG 2.2 makes no distinction between dark-on-light and light-on-dark; the proposed APCA algorithm for WCAG 3.0 does.
Why is green weighted so heavily?
The coefficients 0.2126, 0.7152 and 0.0722 come from the luminous efficiency of human vision. Our eyes have far more sensitivity to the middle of the spectrum, so a green pixel contributes roughly ten times the perceived brightness of a blue pixel at the same intensity.
What is the highest possible contrast ratio?
21:1, pure black on pure white. The lowest is 1:1, a colour against itself. The 0.05 added to both luminances is a flare term modelling ambient light reflecting off the screen, and it is what stops the ratio going to infinity at black.
Is your CMYK output print accurate?
No, and no on-screen converter's is. This is the standard arithmetic conversion, which ignores ink behaviour, paper stock, dot gain and the ICC profile of the press. The CMYK gamut is also smaller than sRGB, so saturated screen colours have no exact print equivalent. Use this as a starting point and proof against the actual profile.
What is the difference between HSL and RGB?
They describe the same colours in different coordinates. RGB says how much of each primary to emit; HSL says which hue, how saturated and how light. HSL is far easier to work with when you want a lighter or duller version of a colour, because you adjust one number instead of guessing at three.
Does #ABC mean the same as #0ABC?
No. Three-digit shorthand expands by DOUBLING each digit, so #ABC is #AABBCC. It is not zero-padded. The doubling rule spreads the 4,096 shorthand colours evenly across the full range instead of crowding them all into the dark end.
Can I test contrast against a gradient or an image?
Not with a single ratio. The formula compares two flat colours. Where text sits over an image or a gradient you must test against the lightest and darkest points the text actually crosses, and the usual remedy is a solid scrim behind the text.
Does opacity affect the contrast ratio?
Yes, and this page does not model it. A semi-transparent foreground blends with whatever is behind it, so the effective colour is the composite, not the one you specified. Compute the blended value first, then test that.
Why does the same colour pair pass at large size and fail at normal size?
Because the requirement changes, not the colour. Larger glyphs have thicker strokes and present more coloured area to the eye, so WCAG accepts 3:1 rather than 4.5:1. A palette that only clears the large-text bar is restricted to headings.