Accessible Color Standards - Designing in the Browser
Stay organized with collections
Save and categorize content based on your preferences.
Welcome to Designing in the Browser with our host, Una Kravets. Today we’re talking about color contrast! We’ll go over what the A, AA, and AAA conformance levels mean and how to ensure proper accessibility compliance for your own site. We’ll go over how to use Chrome Developer Tools and preference media queries, such as “prefers-color-scheme,” to make the right choices for your applications and design systems.
Links:
- Understanding Conformance Levels → https://goo.gle/352mg5n
- Prefers Color Scheme Demo → https://goo.gle/3gY4HGa
- Tooling.report → https://goo.gle/3eDuvad
Designing in the Browser → https://goo.gle/2NeLxjI
Subscribe to Chrome Developers → https://goo.gle/ChromeDevs
arrow_back Back to all episodes
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2020-09-08 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2020-09-08 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2020-09-08 UTC."],[],[]]
