CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-13 21:02:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to What Are Some Tools to Check for Good Color Contrast on Sites? lesson (#63098)

Browse Source
This commit is contained in:
Diem-Trang Pham 2025-10-27 16:03:39 -05:00 committed by GitHub
parent 4a3465008a
commit 3e1882dbde
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-some-tools-to-check-for-good-color-contrast-on-sites
---
# --description--
# --interactive--
When designing websites, ensuring good color contrast is crucial for accessibility and readability. Several tools are available to help developers and designers check and maintain appropriate color contrast ratios on their sites. One popular tool is WebAIM's Color Contrast Checker.
@ -13,6 +13,13 @@ This online tool allows you to input the foreground and background colors of you
To use WebAIM's Color Contrast Checker, simply visit their website and enter the hexadecimal codes for your foreground and background colors. The tool will then calculate the contrast ratio and indicate whether it meets the WCAG 2.0 level AA or AAA standards. Here's an example of how you might use color values in your CSS:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>
```
```css
body {
background-color: #FFFFFF;
@ -20,6 +27,8 @@ body {
}
```
:::
In this example, we've set a white background (`#FFFFFF`) and dark gray text (`#333333`). You can input these color codes into the WebAIM tool to check their contrast ratio.
Another valuable tool is the TPGi Colour Contrast Analyzer. This desktop application offers more advanced features compared to online tools. It allows you to analyze entire web pages, not just individual color pairs. You can use its color picker to select colors directly from your screen, making it easier to check contrast ratios for existing designs.