Comprehensive guide to color theory

• WCAG 2.2 Level AA is the legal baseline for digital accessibility across the EU, requiring a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text and UI components. As of 2025, 83.6% of homepages fail basic colour contrast requirements.
• OKLCH is the modern CSS color space replacing HSL. Unlike HSL, OKLCH is perceptually uniform-equal steps in lightness look equal across all hues, making it the recommended space for CSS gradients and color-mix().
• The European Accessibility Act (EAA) has been applicable since 28 June 2025 under Directive (EU) 2019/882. Slovakia transposed it via Act No. 351/2022 Coll. on the accessibility of products and services for persons with disabilities.
• Colour is the first thing noticed on a screen (within 50 ms), and low colour contrast is the most common WCAG failure-52% of accessibility lawsuits cite contrast issues.

• Primary Colors: Red, blue, and yellow. These colours cannot be made by mixing other colours and are the basis for all other hues.
• Secondary Colors: Green, orange, and purple. Created by mixing two primary colours.
• Tertiary Colors: Created by mixing a primary colour with a neighbouring secondary colour (e.g., red-orange, blue-green).

/* OKLCH syntax: oklch(lightness chroma hue) */
.element {
 /* Lightness 50%, Chroma 0.15, Hue 265° (purple) */
 background-color: oklch(0.5 0.15 265);
 color: oklch(0.9 0.05 265);
}
/* Generating accessible color variants with OKLCH */
:root {
 --brand-primary: oklch(0.5 0.2 240); /* Blue */
 --brand-primary-light: oklch(0.7 0.15 240); /* Lighter variant */
 --brand-primary-dark: oklch(0.3 0.15 240); /* Darker variant */
}

• Tint: Created by adding white to a colour, making it lighter. Often used to convey softness or lightness.
• Shade: Created by adding black to a colour, making it darker. Often evokes sophistication or seriousness.
• Tone: Created by adding gray (a mixture of black and white) to a colour. Tones reduce intensity, resulting in more muted or neutral colours that add depth and subtlety.

• Saturation: Refers to the intensity or purity of a colour. Highly saturated colours appear vivid and rich; desaturated colours appear muted and dull.
• Hue: Refers to the dominant wavelength of light, which determines the base colour (red, blue, yellow, etc.).
• Lightness: Refers to how light or dark a colour appears. Modified to create contrast within a design, enhancing readability and focus.

• Sufficient colour contrast (minimum 4.5:1 for text, 3:1 for UI components)
• No reliance on colour alone to convey meaning
• Colour‑blind‑friendly design

1. Use sufficient colour contrast. Test every text/background combination against WCAG 2.2 AA requirements.
2. Avoid using colour alone to convey meaning. Error messages should include text + icons, not just red text.
3. Avoid red-green and yellow-blue combinations, as they present challenges to many with colour blindness.
4. Use bold instead of colour for emphasis.
5. Use large text and simple fonts. Sans-serif fonts are easiest to read.
6. Test with colour blindness simulators like Color Oracle or WhoCanUse.

1. WCAG 2.2 Level AA requires 4.5:1 contrast for normal text and 3:1 for large text and UI components. As of 2025, 83.6% of websites fail this requirement.
2. OKLCH is the modern CSS color space, replacing HSL. It is perceptually uniform and is the default in Tailwind CSS v4.
3. The European Accessibility Act (EAA) has been applicable since 28 June 2025, transposed in Slovakia by Act No. 351/2022 Coll.
4. Colour is the first thing noticed on a screen (within 50 ms), making it a critical design element.
5. 52% of accessibility lawsuits cite colour contrast issues-contrast is both the most common failure and the easiest to fix.
6. Avoid using colour alone to convey meaning-always use text, icons, or patterns in addition to colour.
7. The 60-30-10 rule (60% dominant, 30% secondary, 10% accent) provides a practical framework for colour distribution.

• Smashing Magazine: The Complete Guide to Color Theory for Web Design
• ColorHexa: Color Information and Conversion
• Canva: Color Wheel
• Adobe Color: Color Tools and Resources
• Color Blindness: Resources and Tools
• Harmony – Procreate Handbook