Mastering Color Accessibility and Consistency with OKHsl

Color plays a vital role in web design, influencing a website’s aesthetics, usability, and overall user experience. As developers and designers, we’re always looking for better ways to work with color — methods that are intuitive, consistent, and accessible. In recent years, a new color space called OKHsl has gained attention for its potential to revolutionize how we approach color in CSS and web design.

OKHsl, developed by Björn Ottosson, aims to combine the simplicity and familiarity of RGB and HSL color models with the perceptual uniformity and precision of more complex color spaces like Lab and LCh. By striking this balance, OKHsl offers a powerful yet user-friendly way to create color palettes, gradients, and themes that are both visually appealing and accessible.

Let’s explore OKHsl color and its benefits, implementation, and practical applications in CSS and web design. We’ll also compare OKHsl to other color spaces, such as the Display P3 gamut, and discuss when to use each for optimal results. Whether you’re a seasoned designer or a developer looking to enhance your color skills, understanding OKHsl can open up new possibilities for creating stunning, accessible, and user-friendly web experiences.

Key aspects of the OKHsl color space

Perceptual uniformity is crucial for creating color palettes that are intuitive and visually coherent.
The OKHsl color space balances the simplicity of RGB/HSL and the perceptual uniformity of Lab/LCh.
Calculating colors from scale numbers using functions and formulas allows for a flexible, adaptable, and accessible color system.
Accounting for the Bezold-Brücke effect and adjusting hue and saturation based on lightness helps maintain consistent color perception.
Integrating WCAG contrast calculations ensures the color palette meets accessibility standards.

The OKHsl color space is a relatively new color space introduced by Björn Ottosson. It aims to provide a more intuitive and perceptually uniform way of working with color compared to traditional spaces like RGB and HSL.

OKHsl components

H (hue): the position on the color wheel, from 0 to 360 degrees
S (saturation): the intensity of the color, from 0 (gray) to 1 (fully saturated
L (lightness): the perceived brightness of the color, from 0 (black) to 1 (white)

CSS Support

CSS doesn’t currently support OKHsl natively, but we can use JavaScript libraries like colorjs.io and culori to convert color values.

:root {
  --slate-50: #f8fafc;
}

// React example
import { convert } from 'colorjs.io';
import css_vars from './colors.css'; 

const ColorDisplay = ({ color_name }) => {
  // Convert the hexadecimal color to OKHsl
  const okhsl_color = convert(`#${css_vars[color_name].slice(1)}`, 'hex', 'okh');

  return (
   <div
    style={{
     width: '100px',
     height: '100px',
     backgroundColor: `okh(${okhsl_color.h}, ${okhsl_color.s}, ${okhsl_color.l})`,
    }}
   />
  );
};

export default ColorDisplay;

We import the CSS file containing the hexadecimal color definitions and assume that the exported object css_vars contains the color variable values.
In the ColorDisplay component, we receive a color_name prop corresponding to one of the color variable names defined in the CSS file (e.g., slate-50).
We use the convert function from colorjs.io to convert the hexadecimal color value to an OKHsl object. The first argument is the color value, which we obtain by slicing the # character from the beginning of the CSS variable value ( css_vars[color_name].slice(1)). The second and third arguments specify the input and output color spaces.
Finally, we use the OKHsl values ( h, s, and l) to set the background color of a div element.

To use this ColorDisplay component, you can pass in the name of the color you want to display:

<ColorDisplay colorName="slate-500" />

This will render a 100×100 pixel div with the color represented by the OKHsl values derived from your CSS file’s — slate-500 hexadecimal color definition.

By creating a utility function to handle the conversion from hexadecimal to OKHsl, you can easily integrate the colorjs.io library into your React components and leverage the benefits of the OKHsl color space, even when working with color definitions from a separate CSS file.

What’s the difference?

Why bother with all of this extra work? Will the user even see a difference? Yes, there can be a visual difference in the rendered color between OKHsl and hexadecimal (hex) color representations, even if they start from the same base color value.

The main reason is that the OKHsl color space is designed to be more perceptually uniform compared to the hex color space, which is based on the RGB color model.

In the hex color space, the numeric values for red, green, and blue are represented linearly, meaning that a change of 1 unit in the hex value corresponds to a relatively significant change in perceived color. This can lead to uneven spacing between colors and make it harder to create visually consistent color scales.

On the other hand, the OKHsl color space is designed to be more closely aligned with how the human eye perceives color. The hue, saturation, and lightness values are mapped to produce a more uniform distribution of colors. This means that small changes in the OKHsl values will result in more consistent and predictable changes in the perceived color.

So, when you convert a hex color value to OKHsl, the resulting color may appear slightly different, even though the underlying color is the same. The differences are often subtle, but they can be noticeable, especially when working with color palettes and trying to maintain visual consistency.

For example, consider the CSS variable —slate-500 from the previous example, which has the hex value #64748b. When converted to OKHsl, the resulting color might have values like okh(218, 0.28, 0.45). While these two representations of the same color may appear very similar, the OKHsl version will typically look more balanced and consistent when used in a more extensive color system.

The differences are usually subtle. The main benefit of using OKHsl is that it allows for more consistent and predictable color palettes, which can be especially important when building design systems and ensuring visual coherence across complex user interfaces.

What about P3?

A few months ago, Jen Simmons gave some exciting details about P3 color on the Syntax podcast. The main differences between the OKHsl and P3 (Display P3) color spaces are:

Gamut size: OKHsl is based on the sRGB color space, with a relatively limited color gamut. P3 is a more expansive gamut color space representing a more extensive range of colors, especially in the green and cyan regions.

Intended use: OKHsl was designed to create accessible and consistent color palettes in digital design. P3 is primarily used for high-end display technologies, such as modern HDR-capable screens, digital cinema projection, and professional video editing.

Perceptual uniformity: OKHsl was designed to be more perceptually uniform than sRGB, making it better suited for color palette generation and manipulation. P3 is not as perceptually uniform as OKHsl, as it was optimized more for color accuracy and comprehensive gamut coverage than perceptual uniformity.

Which color space produces a higher quality result largely depends on your design system or application’s specific use case and requirements.

OKHsl Advantages: Better perceptual uniformity, making it easier to create visually consistent and accessible color palettes. Smaller gamut sizes can be an advantage when working with web and software UI design, where a smaller color space is often preferred for performance and consistency reasons.

P3 Advantages: A wider color gamut, allowing for more vibrant and saturated colors, can benefit high-end display technologies, video, and image editing. It is useful for applications where a wider range of colors is required, such as professional photography, digital cinema, and HDR video production.

Conclusion

OKHsl represents a significant step in color management for web design and CSS. By combining the best aspects of traditional color models with the perceptual uniformity of more advanced color spaces, OKHsl enables designers and developers to create color palettes that are both visually appealing and accessible.

While OKHsl may not be the perfect solution for every use case, its benefits make it a valuable tool in the web designer’s arsenal. As we continue to push the boundaries of web design and user experience, embracing innovative color spaces like OKHsl will help us create digital experiences that are more engaging, inclusive, and memorable.

Art & Algorithms