Colour and contrast
Contrast checker
What do the numbers mean?
- ✔︎ Passes AAA: Contrast of 7 or above passes the strongest level of Web Content Accessibility Guidelines (WCAG).
- ✔︎ Passes AA: Most text needs contrast of 4.5 or more to meet the minimum required on UK public sector websites and apps.
- ✘ Fails with exceptions (fx): Larger text (at least 18pt, or 14pt bold) and interactive components need contrast of 3 or more. Regular text fails at this level.
- ✘ Fails (F): Contrast below 3 fails to meet the standard.
Each colour code has three or six digits, split into red, green and blue components. Use the 4,096 colour table to help find a code or see the poster for a more detailed explanation. They are usually written with a # at the start.
Contrast table
Colour table
This colour table is based on 216 main colours with up to 26 tints each. Each table is ordered from dark to light, then hue, then dull to vivid.
There are 4,096 named colours in total. For example, sulphur is #cc3 and sulphur (yellow tint) is #dd2.
The 'tints' button shows all available tints. The 'contrast' button checks the contrast ratio with other colours. The same information is also in poster form.
grey
red
orange
brown
amber
yellow
avocado
cucumber
lime
green
spring
emerald
jade
cyan
aqua
sky
azure
blue
indigo
plum
iris
magenta
pink
rose
coral
Chrysanthemum colour poster
This poster shows all 4,096 colours with 3-digit codes, from #000 (black) to #fff (white). Click/tap for a larger version, or view the colours in a table instead.
The centre of each chrysanthemum flower is one of 216 main colours with up to 24 tints each in the petals, plus 2 more either side of the centre. A small dot means that a tint doesn't exist. For example, red has no pink tint.
The three digits represent red, green and blue, where 10-15 are written as a-f. Example: indigo is #63c (6 red, 3 green, 12 blue).
Use the Tints flower to identify each tint and work out its code. Example: indigo's red tint is in the 12 o'clock position. The tint's code is: #63c → plus minus minus (+−−) → #72b.
Change a short code to a long code by repeating each digit, for example, #db4 = #ddbb44.
The colour names on the chart are written in black or white depending on which has better contrast for web content accessibility guidelines.
About
Being interested in art, maths and web design, I'm fascinated by colours and how they relate to each other.
As an accessibility auditor and occasional putter of things on the web, I also need to compare the contrast of colours regularly.
The code for both the contrast checker and colour poster is written in "vanilla" Javascript - this is the first interactive Javascript thing I've made. The code was started in 2015.
The poster was inspired by the 216 colour webmaster's palette by Visibone. Given that the 216 "web-safe" colours were in a 6×6×6 colour space I wanted to find a way to present a 3 dimensional cube of these colours in two dimensions. This then extended to a more granular 4,096 colours in a 16×16×16 colour space.
Other contrast checkers
The following tools are all free and help you check colour contrast on the web.
- Eightshapes contrast grid is the only other checker for more than three colours that I've seen. It's elegant and allows you to name your own colours.
- Contrast Checker by Dave House and Nick Colley (formerly of Government Digital Service) is simple and elegant, and checks 3 colours at a time.
- Colour Contrast Checker by Pushedskydiver fills the whole page with colour, and has sliders for hue, saturation and lightness.
- WebAIM's contrast checker has a dropper tool to help you choose colours and many other accessibility resources on their site.
- Colour Contrast Analyser by TPGi (The Paciello Group) is a downloadable tool that lets you pick any colour visible on your screen. We use it often for our accessibility audits.
- The WAVE and Axe browser extensions automatically check for contrast and several other accessibility issues.
Credits
The contrast checker "borrows" code from several places. In particular, thanks to:
Colour names come from a number of sources, and I've made up a few. Particular thanks to: