From 2bee3596119160bfd02824c9cd010de3e7baaaf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Thu, 16 Oct 2025 00:02:02 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to color contrast lesson (#62834) --- .../672baa97f2990e6631d522e7.md | 370 +++++++++++++++++- 1 file changed, 367 insertions(+), 3 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md b/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md index af493f6bc2e..69bf8de2481 100644 --- a/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md +++ b/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md @@ -5,34 +5,398 @@ challengeType: 19 dashedName: how-do-you-create-good-background-and-foreground-contrast-in-your-designs --- -# --description-- +# --interactive-- + +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. First, you may need to familiarize yourself with contrast. Contrast is the difference between two colors - or how easy it is to tell them apart. Colors with a higher contrast will be more visually distinct, whereas colors with a lower contrast will be more visually similar. For example, black and white have a very high contrast ratio. Whereas light blue and light purple have less of a contrast. +:::interactive_editor + +```html + + +
+
High Contrast
+ This text has high contrast (black background and white text). +
+ +
+
Low Contrast
+ This text has low contrast (light blue background and light purple text). +
+``` + +::: + Of course, in these examples the distinction might be made clearer because of the layout. But what about applying these colors to text? You can have the high contrast black text on a white background. And the low contrast purple text on a blue background. +:::interactive_editor + +```html + + +
+ High Contrast Text + This is high contrast text: black text on a white background. +
+ +
+ Low Contrast Text + This is low contrast text: purple text on a light blue background. +
+``` + +::: + But how do you determine what is a "good enough" contrast? You can't base it solely on how the text looks to you, as every user will have a different experience. Thankfully, the Web Content Accessibility Guidelines, or WCAG, provide a standard for this. Text with a contrast ratio of 4.5:1 is considered the AA standard, which is the bare minimum you should follow to be accessible to most users. Text with a contrast ratio of 7:1 is considered the AAA standard, and ensures the best level of accessibility. +:::interactive_editor + +```html + + +
+ AA Standard (Contrast Ratio ~4.5:1) + This text meets the minimum accessibility standard for contrast. +
+ +
+ AAA Standard (Contrast Ratio ~7:1) + This text meets the highest accessibility standard for contrast. +
+``` + +::: + There are a number of websites that can check the contrast ratio between two colors, but most browsers will allow you to do this directly in the developer tools on your website. -Let's open the developer tools and inspect the text elements of the example site. +Let's take a look at a few more examples of contrast ratio to better understand the concept. -The black text on a white background has a contrast ratio of 21:1, which more than meets the AAA standard. The purple text on a blue background, however, has a contrast ratio of 1.48:1, which does not even meet the AA standard. +Here is an example of black text on a white background which has a contrast ratio of 21:1. + +:::interactive_editor + +```html + + +
+ Contrast Ratio 21:1 + This is black text on a white background, which has the highest contrast ratio of 21:1. +
+``` + +::: + +This example more than meets the AAA standard. Now, let's take a look at purple text on a blue background. + +:::interactive_editor + +```html + + +
+ Contrast Ratio 21:1 + This example more than meets the AAA standard with black text on white background. +
+ +
+ Purple on Blue (Lower Contrast) + This doesn't meet the AA standard. +
+``` + +::: + +This example has a contrast ratio of 1.48:1 which does not even meet the AA standard. How can you fix this? Well, there are three aspects that impact the contrast ratio. The first is the hue, which represents the general color type, like red, blue, orange. Let's shift to a hue that is further away from blue. In this case, let's use red. +:::interactive_editor + +```html + + +
+ Contrast Ratio 21:1 + This example more than meets the AAA standard with black text on white background. +
+ +
+ Red on Blue (Higher Contrast Hue Shift) + This doesn't meet accessibility standards. +
+``` + +::: + Unfortunately, this change only brought the contrast ratio to 1.49:1, which means you need to change the saturation, or the "amount" of color present. Let's increase the amount of red in the text. That brings us much closer to the goal, with a 3.54:1 contrast ratio. +:::interactive_editor + +```html + + +
+ Contrast Ratio 21:1 + This example more than meets the AAA standard with black text on white background. +
+ +
+ Low Saturation Red on Blue (Contrast ~1.49:1) + This red has low saturation, resulting in a poor contrast ratio. +
+ +
+ Higher Saturation Red on Blue (Contrast ~3.54:1) + Increasing the saturation of red improves contrast but it’s still below AA standard. +
+``` + +::: + However, you can potentially get even closer by changing the last value, which is lightness. Lightness represents how much white is present in the color. Let's decrease the lightness of the red. Now there is a much darker red against the light blue background, which brings the contrast ratio to 10.34:1. +:::interactive_editor + +```html + + +
+ Contrast Ratio 21:1 + This example more than meets the AAA standard with black text on white background. +
+ +
+ Low Saturation Red on Medium Blue (Contrast ~1.49:1) + This red has low saturation, resulting in a poor contrast ratio. +
+ +
+ Higher Saturation Red on Medium Blue (Contrast ~3.54:1) + Increasing the saturation of red improves contrast but it’s still below AA standard. +
+ +
+ Darker Red on Light Blue (Contrast ~10.34:1) + Decreasing the lightness of the red increases the contrast ratio significantly. +
+``` + +::: + You could continue to adjust the colors to find the balance between the visual effect you want and an accessible contrast ratio. But it is important to remember that accessibility should always take precedence. # --questions--