fix(theming): update palette contrast types to current spec #8993

clshortfuse · 2016-07-10T14:32:20Z

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 #8992, #10164

clshortfuse · 2016-07-10T14:36:04Z

Fixes #8992

EladBezalel · 2016-07-12T17:14:18Z

src/core/services/theming/theme.palette.js

@@ -17,7 +17,7 @@ angular.module('material.core.theming.palette', [])
    'A700': '#d50000',
    'contrastDefaultColor': 'light',
    'contrastDarkColors': '50 100 200 300 A100',
-    'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'
+    'contrastStrongLightColors': '400 500 600 700 800 900 A200 A400 A700'


how you decided that 800 and 900 should be strong light?

EladBezalel · 2016-07-12T17:16:12Z

I'm not really sure of what are you trying to do,
According to the Material Design Color Spec the colors you changed aren't matching

clshortfuse · 2016-07-12T18:17:22Z

@EladBezalel See #8992 Spec says opacites 100% now

topherfangio · 2016-09-09T17:37:52Z

Needs internal team discussion with Naomi, Jeremy and Erin.

clshortfuse · 2016-11-16T15:37:34Z

We previously discussed theme changes to be pushed back to 1.2.x

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 · 2016-12-22T00:21:42Z

Rebased. I caught an a11y issue where some colors would not meet WCAG AA guidelines so perhaps we should considering escalate this.

andrewseguin

Seems fine to me

Splaktar

I actually found that we need to go a lot farther with these changes in order to meet AA contrast guidelines.

I'm going to post another PR with those changes combined with these.

…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.

clshortfuse · 2020-07-01T13:53:00Z

@Splaktar If we're going by the 2014 values, then secondary is 54% opacity on light for black/dark text. If we're going by the 2019 values, that's been bumped up to 60%. It would slightly change your AA values values. (Just an FYI.)

Edit: Actually, don't think this applies specifically to this PR, since these seems like primary text.

Splaktar · 2020-07-01T17:16:21Z

@clshortfuse in general, we're trying to stick to the 2014-2017 spec in this repo. That said, if it comes down to something being inaccessible vs not, then we'll pick the accessible option. In this case, 0.54 vs 0.6 opacity doesn't seem like it will have a significant impact on a11y.

Thank you for taking a look.

…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.

clshortfuse added ui: theme needs: review This PR is waiting on review from the team labels Jul 10, 2016

clshortfuse assigned EladBezalel Jul 10, 2016

clshortfuse force-pushed the mdTheme-correctContrastColors branch from 62438a2 to dae444b Compare July 10, 2016 14:35

EladBezalel reviewed Jul 12, 2016
View reviewed changes

ThomasBurleson added this to the 1.1.2 milestone Aug 22, 2016

ThomasBurleson added the needs: group review label Sep 7, 2016

topherfangio assigned topherfangio and ErinCoughlan Sep 9, 2016

topherfangio added needs: team discussion This issue requires a decision from the team before moving forward. and removed needs: group review labels Sep 9, 2016

topherfangio removed the needs: group review label Sep 9, 2016

clshortfuse modified the milestones: 1.2.0, 1.1.2 Nov 16, 2016

googlebot added the cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ label Nov 16, 2016

clshortfuse force-pushed the mdTheme-correctContrastColors branch from dae444b to 4f3e25f Compare December 22, 2016 00:19

clshortfuse added the a11y This issue is related to accessibility label Dec 22, 2016

Splaktar removed the needs: team discussion This issue requires a decision from the team before moving forward. label Jan 2, 2018

Splaktar unassigned topherfangio Jan 2, 2018

Splaktar requested review from ErinCoughlan and EladBezalel January 2, 2018 20:43

Splaktar added P2: required Issues that must be fixed. ux: polish labels Jan 2, 2018

Splaktar self-assigned this Jan 2, 2018

Splaktar self-requested a review January 2, 2018 20:49

Splaktar modified the milestones: 1.2.0, 1.1.6 Jan 2, 2018

Splaktar modified the milestones: 1.1.6, 1.1.7 Jan 17, 2018

Splaktar modified the milestones: 1.1.7, 1.2.0 Feb 7, 2018

Splaktar removed request for ErinCoughlan and EladBezalel June 30, 2020 01:02

Splaktar unassigned EladBezalel and ErinCoughlan Jun 30, 2020

Splaktar added the needs: manual testing This issue or PR needs to have some manual testing and verification done label Jun 30, 2020

Splaktar requested review from mmalerba and andrewseguin and removed request for mmalerba June 30, 2020 01:03

andrewseguin approved these changes Jun 30, 2020

View reviewed changes

Splaktar removed the needs: review This PR is waiting on review from the team label Jun 30, 2020

Splaktar suggested changes Jul 1, 2020

View reviewed changes

Splaktar added type: bug type: spec alignment For issues related to aligning with the Material Design Spec and removed needs: manual testing This issue or PR needs to have some manual testing and verification done labels Jul 1, 2020

Splaktar mentioned this pull request Jul 1, 2020

fix(theming, toolbar, subheader, input): align color palettes and contrasts with AA standards #11953

Merged

3 tasks

Splaktar closed this in #11953 Jul 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(theming): update palette contrast types to current spec #8993

fix(theming): update palette contrast types to current spec #8993

Uh oh!

clshortfuse commented Jul 10, 2016 •

edited

Loading

Uh oh!

clshortfuse commented Jul 10, 2016

Uh oh!

EladBezalel Jul 12, 2016

Uh oh!

EladBezalel commented Jul 12, 2016

Uh oh!

clshortfuse commented Jul 12, 2016 •

edited

Loading

Uh oh!

topherfangio commented Sep 9, 2016

Uh oh!

clshortfuse commented Nov 16, 2016

Uh oh!

clshortfuse commented Dec 22, 2016

Uh oh!

andrewseguin left a comment

Uh oh!

Splaktar left a comment

Uh oh!

clshortfuse commented Jul 1, 2020 •

edited

Loading

Uh oh!

Splaktar commented Jul 1, 2020

Uh oh!

Uh oh!

fix(theming): update palette contrast types to current spec #8993

fix(theming): update palette contrast types to current spec #8993

Uh oh!

Conversation

clshortfuse commented Jul 10, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

clshortfuse commented Jul 10, 2016

Uh oh!

EladBezalel Jul 12, 2016

Choose a reason for hiding this comment

Uh oh!

EladBezalel commented Jul 12, 2016

Uh oh!

clshortfuse commented Jul 12, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

topherfangio commented Sep 9, 2016

Uh oh!

clshortfuse commented Nov 16, 2016

Uh oh!

clshortfuse commented Dec 22, 2016

Uh oh!

andrewseguin left a comment

Choose a reason for hiding this comment

Uh oh!

Splaktar left a comment

Choose a reason for hiding this comment

Uh oh!

clshortfuse commented Jul 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Splaktar commented Jul 1, 2020

Uh oh!

Uh oh!

clshortfuse commented Jul 10, 2016 •

edited

Loading

clshortfuse commented Jul 12, 2016 •

edited

Loading

clshortfuse commented Jul 1, 2020 •

edited

Loading