OnlineCBT
Represent color and transparency deliberately
CSS supports named colors and numeric color notations. Hex and rgb describe red, green and blue channels; hsl expresses hue, saturation and lightness. Alpha controls transparency. Choosing another notation does not automatically make a color more accessible.
.named { color: navy; }
.hex { color: #1d4ed8; }
.rgb { color: rgb(29 78 216); }
.hsl { color: hsl(224 76% 48%); }
.overlay { background: rgb(15 23 42 / 0.7); }The hex and rgb examples specify the same RGB channel values. The hsl example is a nearby blue, not a promise of an exact conversion. The overlay's 0.7 alpha means its final appearance depends on the content behind it.
Alpha versus opacity
An alpha color changes that paint's transparency. The opacity property composites the entire element, including its descendants, as a transparent group. Setting opacity:0.5 on a card also fades its text; a translucent background color can leave text fully opaque.
Readable interfaces
Test text against the background it actually appears on, including hover, disabled, dark and translucent states. Small light-gray text on white can be unreadable even when it looks refined. Do not use color alone to distinguish correct/wrong answers; add labels or icons with an accessible explanation.
Current color
.badge {
color: #166534;
border: 1px solid currentColor;
}currentColor uses the element's computed color value. It helps borders and icons follow a component's theme without repeating the same literal color.
Practice
- Build success, warning and error messages with readable foreground/background pairs and explicit text labels.
- Compare a card with opacity:0.5 against one using only a 50%-alpha background.
- Change .badge's color and confirm its border follows automatically.
- Place a translucent overlay over both a light and dark image area and check legibility.
