Colourblind colour palette maker

Pick colours

Preview

Explanation

This is a thing for picking contrasting colours. I made it because I'm severely colourblind (protanopia) so need to be guided by numbers rather than just looking at colours.

This tool can try to automatically optimise the text or background colour, while staying close to the originally chosen named colour. Use this to find a shade of "red" with a good contrast against your background colour, for example. The list of named colours is quite short, because colourblind people can't distinguish much more than four or five colours.

The "Name a colour" field in each colour picker can take any CSS colour value. The sliders set the 𝐿, 𝑎 and 𝑏 parameters of the colour in Oklab space.

The preview shows you how the text colour will look used on a single inline word in a paragraph of black text on white, or vice versa, as well as in a block button with the chosen background colour.

There's a very rough simulation of colour vision deficiency which works by reducing the red, green or blue components in the RGB colour space, and the saturation in the HSL colour space. Use these to check that there is still some contrast for all kinds of colour vision deficiency. It will almost never be possible to achieve a very high contrast ratio in all of the simulations.

APCA (Accessible Perceptual Contrast Algorithm) is a new means of measuring the contrast between two colours. It's supposed to more closely match how most people perceive contrast than older methods.

The WCAG (Web Content Accessibility Guidelines) specify a minimum contrast ratio for colours, depending on their relative luminance.

Here are the recommended minimum contrast levels for each algorithm: