Calculating Relative Luminance & WCAG 2.1 Criteria
WCAG 2.1 Criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold).
The formula calculates relative luminance from linearized sRGB values, ensuring colors remain readable under diverse screen brightnesses.
Layering Depth with Surface Tones Rather Than Shadows
In light mode, elevation is rendered using soft CSS box shadows. In dark mode, shadows are invisible against dark canvases.
Accessible dark UI architecture uses semi-transparent white surface overlays (e.g. 5%, 8%, 12% opacity) to communicate elevation and interactive states.
Step-by-Step Tutorial
Input Background & Foreground Colors
Enter your brand HEX or RGB values into DocSwift Color Contrast Checker.
Review WCAG AA and AAA Scores
Check compliance badges for normal text, large headings, and UI components.
Export Tailored CSS Variables
Copy compliant color tokens directly into your Tailwind or CSS variables.
Ready to Try It Yourself?
DocSwift processes everything directly on your device. Fast, safe, and completely free forever.
How helpful was this guide?
Rated 4.9 / 5 by 3,420+ users worldwide
Share with Colleagues & Friends
Help others protect their document privacy
Frequently Asked Questions
What is the Advanced Perceptual Contrast Algorithm (APCA)?
APCA is the next-generation contrast method developed for WCAG 3.0 that evaluates spatial frequency, font weight, and polarity rather than simple flat ratios.
How do I test my dark mode palette for color blindness?
Use DocSwift's built-in Color Blindness Simulator to verify how your palette renders for individuals with Protanopia, Deuteranopia, or Tritanopia.