From 3e1882dbdef45953edf3a3c1cdce4931b0ac1dc0 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Mon, 27 Oct 2025 16:03:39 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to What Are Some
Tools to Check for Good Color Contrast on Sites? lesson (#63098)
---
.../672aa82768e00d600305afc0.md | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md b/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
index 08329e27070..45055cc4c81 100644
--- a/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
+++ b/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
@@ -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
+
+
Hello, World!
+```
+
```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.