Contrast interfaces and readability

1) Why contrast

• reduces cognitive load and fatigue,
• improves interface scan speed,
• increases accessibility for people with visual and color impairments,
• reduces errors in interrelated scenarios (payments, forms, confirmations).

2) Basic concepts and formulas

2. 1 Contrast by WCAG

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), where 'L1 ≥ L2', 'L' is the relative brightness (0.. 1).

2. 2 Relative brightness (sRGB)

1. Bring the components R, G, B in the range 0.. 1.

• if'c ≤ 0. 04045 ', then'c _ lin = c/12. 92`
• otherwise'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Brightness: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Color representations

HSL/HSV - convenient for manual adjustment, but not uniform perceptually.
Lab/LCH/OKLCH - closer to human perception; OKLCH is convenient for systematic variation of lightness/saturation while maintaining readability.

3) Norms and objectives (WCAG 2. 2)

Text ≥ 14 pt bold or ≥ 18 pt (normal): contrast at least 3:1 (AA).
Rest of the text: contrast at least 4. 5:1 (AA).
AAA (increased readability): 7:1 for plain text; 4. 5-1 for a big one.
Iconography and important non-photographic elements (borders of input fields, checkboxes, switches, error indicators): 3:1 landmark with background.
States (hover/focus/pressed/disabled) must be at least 3:1 distinguishable between states or with a background, plus explicit non-photographic indicators (link underline, shadows/frames, thickness change).

4) Design system: contrast tokens

We recommend that the design system record contrast as a property of tokens.

• 'fg/primary '↔' bg/base '≥ 7:1 (AAA for critical text)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted '↔ 'bg/subtle' ≥ 3:1 (service text)
• 'border/default '↔' bg/base '≥ 3:1 (borders of fields, cards)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (links/buttons)
• 'interactive/disabled'should not mimic active states; use contrast reduction and cursor/ARIA attributes.

• basic lightness of the theme (L), then deviations' Δ L'for layers/surfaces (' bg/subtle ',' bg/elevated '),
• fix minimum contrast pairs in tests.

5) Light and dark themes

Light theme: the text is almost black (not a pure # 000, but a warm/cold shade), the background is white to slightly tinted to reduce "sparkle."

Dark theme: avoid clean # 000 background - deep graphite/charcoal with L≈0. 12–0. 16 reduces glare; soften white text to L≈0. 9.
Keep the same contrasting targets in both themes; do not allow color accents to lose readability on a dark background (often a shift 'Δ L' and a decrease in saturation are needed).

6) Text in images and videos

Use overlays (gradient/translucent layer 40-60%) or dies under the text.
Fix at least 4. 5:1 between the text and the local background of the die.
For dynamic video - adaptive background/overlay by analyzing the brightness of the frame (sampling the central/background area).

7) States and interactivity

References must be distinguished not only by color: default underline or underline on hover/focus + contrast ≥ 3:1 with plain text.
Buttons: text and icon ≥ 4. 5:1 to fill; 3:1 ≥ fill to the environment.
Errors/success/warnings: don't rely on colour; add icons/text prompts; provide at least 4 text contrast. 5:1.

8) People with color impairments

• Deuteranopia/Protanopia (red-green zone): Avoid "red vs green" combinations without additional signs.
• Tritanopia: blue-yellow pairs to check separately.
• Make shapes and graphs clear: text labels, different types of strokes/markers, fill patterns, segment captions.

9) Typography and background

Body size: 14-16 px minimum (web), 16-18 px for content zones.
Line spacing 1. 4–1. 6 improves readability against a high contrast background.
Avoid subtle styles on insufficient contrast.
Text on colored backgrounds: Reduce background saturation and/or increase lightness to reach target ratio.

10) Charts, tables, graphs

Lines/columns ≥ 3:1 to grid/background.
Axis labels and legends ≥ 4. 5:1.
Use distinguishable shapes/patterns beyond color.

11) Dynamic/adaptive contrast

Auto contrast: calculate the contrast color of the text to the selected fill (e.g. via OKLCH: match 'L' to reach 4. 5:1).
System settings: respect 'prefers-contrast', 'forced-colors', high-contrast OS modes.
Personalization: setting "High contrast" in the application (strengthening 'Δ L', replacing brand accents with more neutral ones while maintaining brand identity through the form/icons).

12) Control processes and automation

12. 1 For designers

Check contrast on layouts (in both themes and on key backgrounds).
Enter the "contrast slots" in the components (title/primary/secondary/hint).
Document valid background contexts for each component.

12. 2 For developers

Unit helpers: the function of calculating contrast and asserts in tests for token pairs.
Visual snapshots with contrast metrics checking (screen render + sample L1/L2 calculation).
Style linters: prohibition of "raw" color, only through tokens.

12. 3 V CI/CD

Checks all 'fg/bg' pairs in themes and states.
Violation report with component, variant, theme and actual value (e.g. 3. 9:1 with the required 4. 5:1).

13) iGaming specifics (optional)

Bright promo banners and tournament cards often eat up the text. Plate/overlay and background saturation limitation required.
System elements of critical notifications (18 +, limits, risks) - AAA by contrast.
In leaderboards/coefficients: numbers and signs "+/-" ≥ 4. 5:1, highlighting the win - not only in color (icons/tags).

14) Antipatterns

Rely only on color to distinguish the condition.
Thin gray fonts on a colored background without calculating contrast.
"Dark on dark" in Dark Mode, "bright on bright" in promo areas.
Text on background with details/noise without die.

15) Review checklist

Base text

• ≥ 4. 5:1 (normal), ≥ 3:1 (large/fatty).

Links/Buttons

• Button text ≥ 4. 5:1 to fill.
• Distinguishable 3:1 ≥ states or explicit indicators.

Icons/Borders

• ≥ 3:1 to the background.

Dark/Light Themes

• The same contrast goals are achieved.

Media backgrounds

• Overlay/plate, coefficient is maintained.

Availability

• There are non-photographic features besides color.

Automation

• Contrast tests in CI/CD on tokens and components.

16) Token injection (notation example)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Note: approximate values; the final ones are selected by calculating the contrast in a specific topic.

17) Team documentation

In the guidelines, specify: contrast goals, examples of true/false pairs, the 'fg × bg' matrix for key components, rules for media backgrounds, and how to enable High Contrast mode.
Keep the Exceptions and Causes page alive (for example, allowed 3. 8:1 in the narrow case of a large display header).

Brief summary

Contrast is a measured parameter, not a taste parameter. Set goals (AA/AAA), manage them through tokens (preferably in OKLCH), check automatically in CI and visually in layouts, take into account dark/light themes and people with color vision impairments. This guarantees readability, reduces errors and increases conversion.