Developer Tools
Colour Converter and Contrast Checker
Includes the contrast ratios that decide whether text on that colour is readable.
- Runs in your browser
- Nothing uploaded
The tool
Enter a hex value or an RGB colour.
Everything you enter stays on your own machine. Nothing is sent to us or to anyone else, which you can confirm in your browser network tab.
What people use it for
- Deciding whether to put white or black text on a brand colour
- Converting a hex value from a design file into HSL to build a ramp
- Checking a colour meets WCAG AA before using it for body text
- Translating a colour between a design tool and CSS
- Understanding why one colour looks brighter than another
About this tool
Three ways of saying the same thing
Hex stays compact and remains the usual form in CSS. RGB gives the same numbers in decimal, which suits adjusting by hand. HSL describes hue, saturation and lightness, which is far more useful when building a colour ramp, because you can hold the hue and vary the lightness.
Contrast, and why it is here
The contrast ratio decides whether anyone can read text on a background. WCAG AA asks for at least 4.5 to 1 for body text and 3 to 1 for large text. This tool reports the ratio against pure white and pure black, which tells you immediately which text colour to use on a given background.
Poor contrast remains one of the most common accessibility problems, and one of the easiest to avoid at design time rather than fix afterwards.
Relative luminance
The luminance figure is the value the contrast formula is built on. It is not simple brightness: the calculation weights green far more heavily than blue, because human vision does. That is why two colours that look equally dark can behave very differently behind text.
Need this handled across a whole website? See our UI UX Design Services page.
More tools and services
- JSON Formatter and Validator
- Base64 Decoder and Encoder
- URL Encoder and Decoder
- JWT Decoder
- UUID Generator
- Unix Timestamp Converter
If you would rather someone did this properly for you, we offer Web Design Services and Website Development, SEO Services: Search Engine Optimization, AI Automation Agency.
Questions
Questions about this tool
The things clients actually want to know — costs, timelines, ownership and what happens after launch.
WCAG AA asks for 4.5 to 1 for body text and 3 to 1 for large text. AAA asks for 7 to 1.
Because you can hold the hue and change only lightness, which is how a consistent colour ramp is built.
It reports against white and black, which answers the common question of which text colour to use.
Screens vary in calibration and colour profile. The values are exact; the display of them is not.
Three or six digit hex, with or without the hash, and rgb() notation.
Free strategy session
Let’s build something worth finding.
Tell us where you want the business to be in twelve months. We will come back with a costed plan, a realistic timeline, and the numbers we expect to move — no obligation, no jargon.
- 30-minute call, no pitch deck
- Fixed-price proposal in 48 hours
- You own everything we build
Talk to a developer
Not a sales team
- Response time
- Within 1 business hour
- Where we work
- UK, USA & the Gulf
- Contracts
- No lock-in, monthly rolling
- Working since
- 2023