The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes.

The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates.

Discover beautiful color combinations your whole audience can appreciate and follow Web Content Accessibility Guidelines (WCAG) with ease.
#

The color pairings follow WCAG 2.1 AA based on a contrast ratio of 4.5:1. The pairings have sufficient contrast for use with normal text, large text and graphics.

Formula to determine perceived brightness of RGB color

Graphics with scientific data become clearer when the colours are chosen carefully. It is convenient to have good default schemes ready for each type of data, with colours that are:

distinct for all people, including colour-blind readers;
distinct from black and white;
distinct on screen and paper;
matching well together.

This site shows such schemes, developed with the help of mathematical descriptions of colour differences and the two main types of colour-blind vision.

RT @LeaVerou: I made a new mini-app! Easy color contrast ratios

"When a color combination doesn’t pass WCAG, it usually is hard to read"

“We extracted the colors from 10 million Creative Commons images on Flickr. Search this collection by color. Addictive and very likely the best color search engine in the world*!”

Web tool for guidance in choosing choropleth map color schemes, based on the research of Dr. Cynthia Brewer. Built and maintained by Axis Maps.