This repository was archived by the owner on Sep 5, 2024. It is now read-only.
fix(theming, toolbar, subheader, input): align color palettes and contrasts with AA standards #11953
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
type: bug
a11y
|
All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the ℹ️ Googlers: Go here for more info. |
googlebot
added
the
cla: no
|
Previous CLA acceptance: #8993 (comment) |
Splaktar
force-pushed
the
mdTheme-correctContrastColors
branch
from
be59358 to
fe69363
Compare
This was referenced Jul 1, 2020
andrewseguin
approved these changes
Jul 1, 2020
…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.
…LightColors defined - if `contrastStrongLightColors` is defined and `contrastLightColors` is not, `getContrastType()` was incorrectly picking `dark` instead of `strongLight` - remove all of the duplicate `contrastLightColors` entries that had to remain before, due to this bug - improve JSDoc - checkbox's checkmark should always match the background color and never depend on the contrast of the accent color - remove duplicate theme style generation for checkbox and button
…settings - change docs app's warn theme 500 value to 700 value to make flat warn buttons pass contrast checks - revert docs-red palette defaulting to `A700` since that breaks hover and focus styles - remove the override of the `.demo-toolbar` color since it is no longer needed after the toolbar contrast fixes
Splaktar
force-pushed
the
mdTheme-correctContrastColors
branch
from
fe69363 to
fb27d37
Compare
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
md-toolbars with themd-warnclass don't properly thememd-iconsmd-subheadertext does not meet AA standards (4.5+ ratio) due to low opacity.md-inputlabels and placeholders do not meet AA standards (4.5+ ratio) due to low opacity.Issue Number:
Fixes #8992. Fixes #10164. Closes #8993
What is the new behavior?
md-icons in toolbars withmd-warnaria-labelsto demoInputsInToolbarmd-colorsdocs-blueDoes this PR introduce a breaking change?
Other information
I did a lot of extensive testing of this on the docs site using Chrome DevTools contrast checks, Lighthouse A11y Audits, and the WebAIM Contrast Checker.