Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

a11y: color palette does not meet AA guidelines #10164

Closed
clshortfuse opened this issue Dec 22, 2016 · 2 comments · Fixed by #11953
Closed

a11y: color palette does not meet AA guidelines #10164

clshortfuse opened this issue Dec 22, 2016 · 2 comments · Fixed by #11953
Assignees
@Splaktar @clshortfuse
Labels
a11y This issue is related to accessibility has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. resolution: fixed ui: theme ux: polish
Milestone
1.2.0

Comments

@clshortfuse
Copy link
Contributor

Actual Behavior:

  • What is the issue? * Current color palette uses old Angular Material opacities for colors that do not meet a11y guidelines.
  • What is the expected behavior? Should use new values.

Angular Versions: *

  • Angular Material Version: 1.1.1

We are currently using old opacity values which used 87% opacity for certain colors:

https://web.archive.org/web/20140628054353/http://www.google.com/design/spec/style/color.html#color-ui-color-application

We should be using 100% opacity as per the new guidelines. https://material.google.com/style/color.html#color-text-background-colors

For example, default text for grey-600 (#757575) should now be 100% white, not 87% white. This moves the contrast ratio from 3.9 to 4.6.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html states we should require at least 4.5 contrast ratio for all primary text.
@clshortfuse clshortfuse added the a11y This issue is related to accessibility label Dec 22, 2016
@clshortfuse clshortfuse self-assigned this Dec 22, 2016
clshortfuse added a commit to clshortfuse/material that referenced this issue Dec 22, 2016
@clshortfuse
fix(theming): update palette contrast types to current spec
4f3e25f 
Previous values used out-of-spec colors for contrast.
Low opacities values caused the design to not to meet AA standards
of mininum 4.5 contrast ratio for default text.

* Set hues with contrast type `light` to `strongLight`.
* Set contrast type for `green` `500` to `dark`.

Fixes angular#8992, angular#10164
@clshortfuse clshortfuse mentioned this issue Dec 22, 2016
Closed
@clshortfuse clshortfuse added the has: Pull Request A PR has been created to address this issue label Dec 22, 2016
@ThomasBurleson ThomasBurleson added this to the 1.2.0 milestone Jan 3, 2017
@Splaktar Splaktar added the P2: required Issues that must be fixed. label Jan 2, 2018
@Splaktar Splaktar modified the milestones: 1.2.0, 1.1.6 Jan 2, 2018
@Splaktar Splaktar modified the milestones: 1.1.6, 1.1.7 Jan 17, 2018
@Splaktar Splaktar modified the milestones: 1.1.7, 1.2.0 Feb 7, 2018
@Splaktar Splaktar assigned Splaktar and unassigned EladBezalel Aug 17, 2018
@Splaktar
Copy link
Member

The spec updates for 2017 can still be found here:
https://material.io/archive/guidelines/style/color.html#color-usability

This archive holds the details prior to the MD 2018 changes.

@Splaktar Splaktar mentioned this issue Aug 17, 2018
Closed
@Splaktar
Copy link
Member

Just a note here to make sure that we check both light and dark contrasts as mentioned in #8992.

Splaktar pushed a commit that referenced this issue Jul 1, 2020
@clshortfuse @Splaktar
fix(theming): update palette contrast types to current spec
76a4c47 
Previous values used out-of-spec colors for contrast.
Low opacities values caused the design to not to meet AA standards
of minimum 4.5 contrast ratio for default text.

* Set hues with contrast type `light` to `strongLight`.
* Set contrast type for `green` `500` to `dark`.

Fixes #8992. Fixes #10164.
Splaktar added a commit that referenced this issue Jul 1, 2020
@Splaktar
fix(theming, toolbar, subheader, input): align color palettes and con…
be59358 
…trasts with AA standards

- properly theme `md-icon`s in toolbars with `md-warn`
- all colors and their contrasts meet 4.5 contrast ratio requirements
  - except a few edge cases which have comments to explain them
- add `aria-labels` to demoInputsInToolbar
- increase opacity of subheader text to meet AA contrast ratio requirements
- increase opacity of input placeholders and labels to meet AA contrast ratio requirements
- minor regexp adjustments for `md-colors`
- fix colors/demoThemePicker and colors/demoBasicUsage to pass Lighthouse a11y audit
- update button/demoBasicUsage to pass Lighthouse a11y audit
- add missing alt tag in demoInCardActions and demoCardActionButtons
- adjust docs app theme to define valid contrast colors for `docs-blue`
- fix inaccurate JSDoc

Fixes #8992. Fixes #10164.
@Splaktar Splaktar mentioned this issue Jul 1, 2020
Merged
3 tasks
Splaktar added a commit that referenced this issue Jul 1, 2020
@Splaktar
fix(theming, toolbar, subheader, input): align color palettes and con…
fe69363 
…trasts with AA standards

- properly theme `md-icon`s in toolbars with `md-warn`
- all colors and their contrasts meet 4.5 contrast ratio requirements
  - except a few edge cases which have comments to explain them
- add `aria-labels` to demoInputsInToolbar
- increase opacity of subheader text to meet AA contrast ratio requirements
- increase opacity of input placeholders and labels to meet AA contrast ratio requirements
- minor regexp adjustments for `md-colors`
- fix colors/demoThemePicker and colors/demoBasicUsage to pass Lighthouse a11y audit
- update button/demoBasicUsage to pass Lighthouse a11y audit
- add missing alt tag in demoInCardActions and demoCardActionButtons
- adjust docs app theme to define valid contrast colors for `docs-blue`
- fix inaccurate JSDoc

Fixes #8992. Fixes #10164. Closes #8993.
Splaktar added a commit that referenced this issue Jul 2, 2020
@Splaktar
fix(theming, toolbar, subheader, input): align color palettes and con…
d9350ee 
…trasts with AA standards

- properly theme `md-icon`s in toolbars with `md-warn`
- all colors and their contrasts meet 4.5 contrast ratio requirements
  - except a few edge cases which have comments to explain them
- add `aria-labels` to demoInputsInToolbar
- increase opacity of subheader text to meet AA contrast ratio requirements
- increase opacity of input placeholders and labels to meet AA contrast ratio requirements
- minor regexp adjustments for `md-colors`
- fix colors/demoThemePicker and colors/demoBasicUsage to pass Lighthouse a11y audit
- update button/demoBasicUsage to pass Lighthouse a11y audit
- add missing alt tag in demoInCardActions and demoCardActionButtons
- adjust docs app theme to define valid contrast colors for `docs-blue`
- fix inaccurate JSDoc

Fixes #8992. Fixes #10164. Closes #8993.

BREAKING CHANGE: The contrast colors (the text or icon color, for example on a raised button) of many of our default palettes have been updated to meet the [AA level of the contrast guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum) for web accessibility. If you are using our default palettes directly, the accessibility of your application should be improved. However, we recommend that you evaluate this after updating to `1.2.0`. There may be edge cases in your app or custom styles that need to be updated to meet accessibility guidelines.

If you find significant accessibility issues after updating, please report them to us. In `1.2.x`, we have a lot more control over our component theming in regards to hues and opacities.

If your app is using a custom palette, whether based on a copy of default palette or not, we encourage you to evaluate that your contrast configuration meets the WebAIM guidelines. Please review our guide on [Defining Custom Palettes](https://material.angularjs.org/latest/Theming/03_configuring_a_theme#defining-custom-palettes) for details.
Splaktar pushed a commit that referenced this issue Jul 2, 2020
@clshortfuse @Splaktar
fix(theming): update palette contrast types to current spec
d716fde 
Previous values used out-of-spec colors for contrast.
Low opacities values caused the design to not to meet AA standards
of minimum 4.5 contrast ratio for default text.

* Set hues with contrast type `light` to `strongLight`.
* Set contrast type for `green` `500` to `dark`.

Fixes #8992. Fixes #10164.
Splaktar added a commit that referenced this issue Jul 2, 2020
@Splaktar
fix(theming, toolbar, subheader, input): align color palettes and con…
3a291ac 
…trasts with AA standards

- properly theme `md-icon`s in toolbars with `md-warn`
- all colors and their contrasts meet 4.5 contrast ratio requirements
  - except a few edge cases which have comments to explain them
- add `aria-labels` to demoInputsInToolbar
- increase opacity of subheader text to meet AA contrast ratio requirements
- increase opacity of input placeholders and labels to meet AA contrast ratio requirements
- minor regexp adjustments for `md-colors`
- fix colors/demoThemePicker and colors/demoBasicUsage to pass Lighthouse a11y audit
- update button/demoBasicUsage to pass Lighthouse a11y audit
- add missing alt tag in demoInCardActions and demoCardActionButtons
- adjust docs app theme to define valid contrast colors for `docs-blue`
- fix inaccurate JSDoc

Fixes #8992. Fixes #10164. Closes #8993.

BREAKING CHANGE: The contrast colors (the text or icon color, for example on a raised button) of many of our default palettes have been updated to meet the [AA level of the contrast guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum) for web accessibility. If you are using our default palettes directly, the accessibility of your application should be improved. However, we recommend that you evaluate this after updating to `1.2.0`. There may be edge cases in your app or custom styles that need to be updated to meet accessibility guidelines.

If you find significant accessibility issues after updating, please report them to us. In `1.2.x`, we have a lot more control over our component theming in regards to hues and opacities.

If your app is using a custom palette, whether based on a copy of default palette or not, we encourage you to evaluate that your contrast configuration meets the WebAIM guidelines. Please review our guide on [Defining Custom Palettes](https://material.angularjs.org/latest/Theming/03_configuring_a_theme#defining-custom-palettes) for details.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

@clshortfuse clshortfuse

Labels
a11y This issue is related to accessibility has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. resolution: fixed ui: theme ux: polish
Projects
None yet
Milestone
1.2.0
4 participants
@ThomasBurleson @Splaktar @EladBezalel @clshortfuse