UI & Data Visualization

Adaptive color theme

A color theme with options that can be adjusted by people using the interface. Options affect every color in the theme such as contrast, lightness, and saturation.

Lightness: 100

Contrast: 1

Saturation: 100

How it affects UI design

Adaptive themes can provide higher contrast for users who need more contrast than WCAG 1.4.3 (contrast minimum).

Adaptive themes can provide lower contrast and lightness controls for users with light sensitivity.

Adaptive themes can provide lower saturation for users who may benefit from lower saturated colors.

Light sensitivity
Light & dark adaptation
Color vision deficiency
Bezold effect
Chromatic adaptation
Color constancy
Contrast sensitivity
Contrast discrimination
Simultaneous contrast
Polygonal colors
Relative luminance
APCA
Light mode
Dark mode
Increase contrast mode
High contrast mode
Color scale

Helpful tools:
Leonardo color: https://leonardocolor.io

Sources:

Adaptive Color in Design Systems. Medium.com. https://medium.com/@NateBaldwin/adaptive-color-in-design-systems-7bcd2e664fa0
Accessible color for design systems just got easier. Medium.com. https://medium.com/@NateBaldwin/accessible-color-for-design-systems-just-got-easier-40e8420a8371

Adaptive color theme

How it affects UI design

Related topics