Relative Colors (RCS) in CSS enable the derivation of new color values by performing math operations on color components within supported color spaces. This article from Lea Verou shows demonstrates how to the upcoming CSS contrast-color() function works, showing how it automatically determines accessible text colors based on background color, using currently available CSS features like RCS.

Key points:

• CSS contrast-color() will make it easy to derive accessible text colors for any background color

• Until it's released, relative color syntax (RCS) can be used to achieve something similar

• The APCA contrast algorithm provides better readability results than WCAG guidelines, so an optimal threshold balances the two

• Using RCS allows customizing the threshold for specific color ranges or gamuts

• Additional techniques like text-shadow can provide fallbacks for non-supporting browsers

• Luminance may provide an alternative approach, but doesn't appear significantly better than using lightness