Summary

This PR updates editor body colors (UI elements like menus and toolbars are out of scope) to hit WCAG 2.0 AA contrast requirements and converts their CSS variables to use the OKLCH color space instead of RGB. OKLCH is a polar color space similar to HSL, but has 2 key advantages:

1. It supports wide color gamuts. Computer displays can't reproduce all colors that the human eye can see, and the color gamut that a display is capable of showing varies. This means that the same HSL color can end up looking washed out on one display and oversaturated on another, unless they're calibrated to the same gamut. OKLCH uses arbitrary values for its equivalent saturation and lightness rather than being mapped directly to display output, so colors look much more consistent across different displays.
2. It takes into account human perception of color and contrast. In HSL, a gradient created by sweeping across all hue values will have noticeable darker and lighter bands some colors appear brighter or darker to us at the same luminance level. OKLCH accounts for this, so sweeping the hue results in a much smoother gradient.

The second advantage is useful to us as it makes it much easier to ensure each highlight color has the same relative saturation and brightness. With HSL/RGB, it takes a lot of trial and error to do this. The first advantage is relevant as the new colors all fall within the sRGB gamut, which pretty much all modern displays have good coverage of.

While the most significant changes have been made to highlight colors, the following colors have been adjusted too to hit the contrast requirements:

• Dark mode quote block text
• Dark mode add file button text
• Toggle block "add block" button text

Verified that axe scans from out a11y tests no longer report contrast issues. An important thing to note is that placeholder contrast is currently untested and so placeholder colors have not been updated as part of this PR, only colors which have been caught to not pass WCAG contrast requirements when running an axe scan of the editor body. See #3205 for more info.

There's a temporary highlight-color-comparison.html file to inspect the old vs new highlight colors (to be removed before merging). The screenshots below are taken from it.

Closes #2852
Closes #2827
Closes #3043

Rationale

The old colors were hard to read at times and didn't conform to a11y standards.

Changes

• Updated CSS.
• Added example to view all combinations of highlight colors.

Impact

N/A

Testing

axe-core scan no longer brings up contrast issues for editor body.

Screenshots/Video

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

N/A