[Design] Color scheme changes to improve contrast ratios

[marcotuts]

All colors are documented in Figma. The existing default color scheme for the new OpenEdX mobile platform has several significant contrast ratio issues, most of which are documented here. These colors updates are closely based on WCAG 2.2 guidelines for contrast ratio. They should be applied at a theme level where possible, and should be applied to all views.

Dark Theme

Color	Old Value	New Value	Change	Rationale
Shade	N/A	Shade #1E2839	Add a “shade” color to dark theme	Matches corresponding use in light theme
Light	#79889F	#8E9BAE	Increase Light’s lightness to 62	Allow WCAG-compliant use on half-dark, dark, and shade backgrounds
Accent	#5478F9	#3F68F8	Decrease lightness to 61	Increases contrast ratio with primary white text
Info	Same as new value	No change	Switch to using dark text on info color	Increases contrast ratio to meet WCAG
Warning	Same as new value	No change	Switch to using dark text on warning color	Increases contrast ratio to meet WCAG
Success	#23BCA0	#198571	Reduce lightness to 31	Increases contrast ratio with primary white text
Error	#FF3D71	#D42B58	Reduce saturation to 66, reduce lightness to 50	Increases contrast ratio with primary white text. Saturation reduction prevents visual clash/glare effect against lower-saturation background
Accent (for outline buttons and labeled buttons)	N/A	Dark theme accent text	Use the “dark theme accent text” color instead of “accent” for outline buttons and labeled buttons consistently	The dark theme accent color has insufficient contrast for text directly against a half-dark background. The “dark theme accent text” color does, so be sure to use it here instead.

Light Theme

Color	Old Value	New Value	Change	Rationale
Info	#42AAFF	#3A9AE9	Switch to using dark text on info color AND Reduce saturation to 80, reduce lightness to 57	Increases contrast ratio to meet WCAG. Saturation is reduced to improve the color’s appearance and maintain a distinction with Accent.
Warning	Same as new value	No change	Switch to using dark text on warning color	Increases contrast ratio to meet WCAG
Success	#23BCA0	#198571	Reduce lightness to 31	Increases contrast ratio with primary white text
Error	#FF3D71	#E8174F	Reduce saturation to 82, reduce lightness to 50	Increases contrast ratio with primary white text, preserving brighter color to match dark mode theme