Color Converter & Contrast Checker
Pick a color, copy it in any format, and check if text is readable on it.
Contrast checker
About WCAG contrast
Accessibility guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text at level AA, 7:1 for AAA, and 3:1 for large text. Higher contrast helps everyone, especially in bright light.
FAQ
Which formats can I type in?
HEX (#2563eb or #26e), RGB (37, 99, 235) and HSL (221, 83%, 53%). Edit any field and the others follow.
How to use the converter
- Choose a colour with the colour swatch, or type directly into any of the three boxes: HEX, RGB or HSL.
- As soon as what you typed is complete and valid, the other two boxes and the swatch update to match. While you are mid-edit and the value is not yet valid, the other fields simply stay as they were.
- Copy the format you need into your stylesheet, design tool or document.
Accepted input: HEX with or without the # sign, in six-digit form (2563eb) or three-digit shorthand (26e, which expands to 2266ee); RGB as three numbers from 0 to 255 (surrounding text such as "rgb(" is ignored, so rgb(37, 99, 235) works); and HSL as hue 0 to 360 followed by saturation and lightness from 0 to 100. Eight-digit HEX codes with an alpha channel are not supported.
How the three formats relate
HEX and RGB describe the same thing. Each pair of hex digits is one channel in base 16, so #2563eb splits into 25, 63 and eb, which are 37, 99 and 235 in decimal: the red, green and blue amounts.
HSL describes the same colour in a more human way. Hue is the position on the colour wheel in degrees (0 is red, 120 green, 240 blue), saturation is how vivid it is, and lightness runs from black at 0% through the pure colour at 50% to white at 100%. That makes HSL convenient for building variations: keep the hue and nudge the lightness to get a lighter hover state or a darker border. For example, hsl(120, 50%, 40%) converts to #339933, and pure red is hsl(0, 100%, 50%).
One thing to know: the HSL box shows whole numbers only. Converting #2563eb gives 221, 83%, 53%, but typing exactly those numbers back gives #2463eb, one step off in the red channel. This rounding is normal; keep the HEX value as your master copy and treat HSL as a convenient view.
How the contrast checker works
Contrast is judged separately from the converter, with its own pair of pickers for text and background. The tool calculates each colour's relative luminance, a measure of perceived brightness that weights green most heavily, then takes the ratio (lighter + 0.05) divided by (darker + 0.05). The result ranges from 1:1 (identical colours) to 21:1 (black on white). Swapping text and background gives the same ratio.
The four tiles show the ratio and three pass/fail results:
- AA normal text: 4.5:1 or higher.
- AAA normal text: 7:1 or higher.
- AA large text: 3:1 or higher.
Examples: white text on the default blue #2563eb scores 5.17:1, which passes AA but fails AAA. Black on the same blue scores only 4.06:1, which fails normal-text AA even though black looks like the safe choice. White on yellow #ffff00 scores about 1.07:1, which is practically invisible. Mid-grey is a classic edge case: #777777 on white scores 4.48:1 and fails, while #767676 scores 4.54:1 and passes. The comparison uses the exact value, not the rounded one shown.
Common uses
- Moving a colour between tools. Design apps often give RGB, CSS wants HEX or HSL, and brand guides may list only one of them.
- Checking button and link colours before publishing, especially light text on a coloured background or grey text on white.
- Creating tints and shades by editing the lightness value in HSL and copying out the HEX.
- Documenting a palette with the same colour in the formats your team uses.
Tips and limits
- Large text in WCAG means roughly 18 point regular or 14 point bold and above. Check your own sizes in the guideline itself before relying on the lower 3:1 threshold.
- Passing a ratio is a minimum, not a guarantee. Thin fonts, small sizes, patterned backgrounds and text over images can still be hard to read.
- The ratio is calculated for flat colours. It does not account for transparency, gradients, shadows or screen brightness.
- The contrast checker only takes values from its colour pickers, so to test a colour you typed in the converter, copy its HEX into the picker or choose it there.
- Colours are in the sRGB space used by web pages. Wide-gamut or print colours (CMYK) are outside what this tool converts.
- Do not rely on colour alone to carry meaning, such as red for errors with no text or icon. Some visitors cannot tell certain hues apart.
More questions
Why does my HEX field not update when I type a few characters?
Fields update only when the input is a valid complete value. Three or six hex digits are valid; two, four or five are not. Finish typing and the other fields will follow.
Why does the colour picker look slightly different from my design tool?
The picker is the one built into your browser and operating system, so its layout varies. The values themselves, the numbers in the three boxes, are standard and are what you should compare.
Do the pass results mean my page meets the accessibility standard?
They cover text contrast only. Accessibility also involves structure, keyboard use, text alternatives and more, so treat these results as one check among several.