openedx / openedx/openedx-app-ios
[Design] Color scheme changes to improve contrast ratios
Open
@sdaitzman is already working on this.
Since Feb 27, 2024.
a11y
- Dominant language
- Swift
- Stars
- 31
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.