[a11y]: color contrast is less than the WCAG AA minimum requirements
See original GitHub issueDescription
When running yarn test:a11y
multiple stories are recieving an example of the following contrast error:
![Screen Shot 2022-01-12 at 11 55 13 AM](https://user-images.githubusercontent.com/20210594/149212176-2beccd1f-8f9f-452a-8eca-570479ed4d72.png)
Example output of all accessibility errors: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/runs/4779749308?check_suite_focus=true#step:7:2065
Component(s) impacted
- Callout Quote
<dds-quote-source-heading>
<dds-quote-source-copy>
<dds-callout-link-with-icon>
- Callout with Media
<dds-content-block-heading>
<dds-callout-with-media-copy>
- Dotcom shell (all)
<dds-content-block-heading>
<dds-callout-quote>
<dds-quote-source-heading>
<dds-quote-source-copy>
<dds-quote-source-bottom-copy>
<dds-callout-link-with-icon>
Browser
No response
Carbon for IBM.com version
Canary
Severity
Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.
Application/website
Carbon for IBM.com web components
Package
@carbon/ibmdotcom-web-components
CodeSandbox example
Steps to reproduce the issue (if applicable)
View the actions tab and look under Run a11y compliance tests
for web components
To run locally go to packages/web-components
and yarn test:a11y
Release date (if applicable)
No response
Code of Conduct
- I agree to follow this project’s Code of Conduct
- I checked the current issues for duplicate issues
Issue Analytics
- State:
- Created 2 years ago
- Comments:10 (10 by maintainers)
Top Results From Across the Web
Understanding Success Criterion 1.4.3: Contrast (Minimum)
The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text,...
Read more >Understanding WCAG 2 Contrast and Color Requirements
3 Contrast (Minimum) This Level AA requirement reads: The visual presentation of text and images of text has a contrast ratio of at...
Read more >Color contrast - Accessibility - MDN Web Docs - Mozilla
The color contrast between background and foreground content ... Type of content, Minimum ratio (AA rating), Enhanced ratio (AAA rating) ...
Read more >Color Contrast and Accessibility - Aditus
Text is considered small when it is less than 18pt (roughly 24 pixels) or less than 14pt bold (roughly 19px). Small text needs...
Read more >Understanding SC 1.4.3 – Contrast Minimum - DigitalA11Y
This success criterion requires that the texts and image of texts that are regular in size meet the color contrast ratio of 4.5:1...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Issue opened in the Equal Access Toolkit here: https://github.com/IBMa/equal-access/issues/687
@proeung I need to take a further look on this one, going to assign myself so I don’t lost it for now!