Visual Readability Calculator WCAG and APCA

Check the real contrast of your designs with APCA (WCAG 3.0). Analyze how font weight and size affect actual readability. From simple ratios to perceptual legibility.

Base Colors
#1E293B
#FFFFFF
Typography
16px
400
Contrast Comparison
WCAG 2.1 Ratio 21.00 Passes AAA
APCA Lc (WCAG 3) 100 Excellent
Perceptual Preview

Visual readability is not just mathematics. It is how light and shadow interact with your eyes.

APCA Recommendations
Reading Text (Body)
Small Text / Caption
UI / Buttons
Utilities Studio

Want this utility on your website?

Customize colors and dark mode for WordPress, Notion or your own site.

Go Ahead

Frequently Asked Questions

What is APCA and why is it different from WCAG 2.1?

APCA is the Advanced Perceptual Contrast Algorithm developed for WCAG 3.0. Unlike the old simple ratio, APCA uses mathematical models that mimic how the human brain perceives contrast, taking into account polarity (light vs. dark background) and font size/weight.

What does the Lc value mean?

Lc (Lightness Contrast) is the contrast value generated by APCA. A value of 100 represents ideal maximum contrast, while values below 60 start to be critical for continuous reading text. It is an absolute magnitude scale of perception.

How does font weight affect readability?

Thin/Light fonts require much higher contrast to be readable. APCA penalizes low-weight fonts, indicating that a design passing WCAG with a weight-100 font may be illegible in practice.

Is this calculator private?

Yes, all calculations are performed locally in your browser. The colors and settings you analyze are never sent to any server, guaranteeing full privacy for your design projects.

# Visual Readability Calculator (WCAG vs APCA)

Understand how your colors and typography affect actual reading with the new perceptual accessibility standard. WCAG 2.1 uses a simple 2008 mathematical formula. APCA is the new model proposed for WCAG 3.0 that mimics human perception.

# Key Points of APCA

  • Polarity: Understands that Dark Mode is perceived differently than Light Mode.
  • Font Weight: Assigns specific contrast levels (Lc) based on typography weight.
  • Linearity: Fixes mathematical inaccuracies in the 2008 relative luminance model.

# Recommended APCA Levels

  • Lc 90+: Ideal for very small or low-weight text.
  • Lc 75: The standard for main body reading text.
  • Lc 60: Minimum for readable medium-size content.
  • Lc 45: Minimum for large or decorative elements.

Bibliographic References

More utilities from Web Development

Free Online JSON Formatter and Validator

Free online tool to format, validate and repair JSON code. Beautify and format JSON. Detects syntax errors and improves code readability.

Use Tool

Free Online SVG to CSS and Data URI Converter

Transform your SVG icons and vectors into CSS code (Background or Mask) or compressed Data URI. Optimise your website performance by eliminating external HTTP requests.

Use Tool

Aspect Ratio Calculator in Pixels. Online Proportions

Calculate new image, video and web design resolutions and maintain the exact proportion to avoid distorting graphics. Supports 16:9, 4:3, 21:9 and custom formats.

Use Tool

Placeholder Image Generator. Rapid Web Mockups Online

Create custom placeholder images for your web designs. Adjust resolution, background, text and export in PNG, WebP or JPEG instantly.

Use Tool

URL Encoder and Decoder Online

Convert special characters from any link to safe format (Percent-Encoding) or return them to their original readable state instantly and locally.

Use Tool

Duplicate CSS Remover Online. Unify and Clean Stylesheets

Free tool to clean and purge duplicate CSS code. Unifies redundant selectors, respects the cascade, and reduces your file size instantly in the browser.

Use Tool

CSS to Inline HTML Converter. Inliner for Emails

Transform your stylesheets and CSS classes into automatically inlined styles in your HTML. Ideal for newsletters, transactional emails, and safe web layout.

Use Tool

CSS Specificity Calculator Online. Selector Weight Visualizer

Calculate the specificity and exact weight of any CSS selector. Visual tool to understand which CSS rule wins the cascade and avoid using !important.

Use Tool

Online Cron Expression Generator. Translator and Visualizer

Free visual tool to generate Linux Cron expressions. Translates * * * * * into human language and shows the next 5 executions in real time.

Use Tool

Online Keyboard Key Code Visualizer. KeyCode Inspector

Free online tool to see the event.key, event.code, event.which and location of any keyboard key in real time. Generates ready-to-use JavaScript code snippets.

Use Tool

LLM Cost Calculator. AI Model Pricing Estimator

Free online tool to estimate the cost of calling LLM APIs. Compare GPT-4o, Claude, Gemini, Llama and more with real token prices per million tokens.

Use Tool

Musical Typography Scale. Modular Scale Calculator

Free online tool to create harmonious visual hierarchies using modular scales based on musical proportions. Generates ready-to-use CSS variables for your web design.

Use Tool

Mobile Mockup Generator for App Store. iPhone and Google Pixel

Create professional presentations for the App Store and Google Play. iPhone and Pixel mockups with custom backgrounds, panoramic layouts, and bulk high-resolution export.

Use Tool

Online Security Hash Generator

Calculate MD5, SHA-1, SHA-256 and SHA-512 hashes instantly. Free, private and ultra-fast security tool for developers. 100% Client-Side.

Use Tool

Private AI Prompt Library

Organize, tag and save your ChatGPT, Midjourney and Claude prompts privately. Your own prompt bank in localStorage.

Use Tool

Online Color Converter RGB HEX and HSL

Convert colors between RGB, HEX and HSL instantly. Generate complementary color harmonies and analyze WCAG contrast. 100% client-side and private.

Use Tool

Online SVG Sanitizer

Optimize and clean SVGs exported from Figma, Adobe Illustrator or Inkscape. Remove metadata, unnecessary attributes and empty groups to get a production-ready SVG.

Use Tool

UTM Parameter Generator for Google Analytics

Create precise tracking links for your digital marketing campaigns. Optimized for Google Analytics and other analytics tools.

Use Tool

URL Tracking Cleaner: Remove UTM, FBCLID and GCLID

Automatically remove tracking and advertising parameters from your URLs. Share clean links and protect your digital privacy instantly.

Use Tool

Online SSL/TLS Certificate Inspector View PEM and CRT Files

Analyze SSL certificate files (.pem, .crt, .der) locally. Check expiration dates, issuers, subjects and SHA-256 fingerprints without your data leaving your browser.

Use Tool

Security.txt Generator RFC 9116

Create your professional security.txt file to facilitate vulnerability reporting and comply with international web security standards.

Use Tool

Data Time Calculator Impact of Web Speed

Discover how much lifetime your users lose waiting for your website to load on 3G, 4G, and 5G connections. Calculate the real impact of your site weight.

Use Tool

Excel and CSV to HTML Table Converter Code Generator

Convert your Excel or CSV data to clean, semantic HTML tables instantly. Free tool for developers and content creators.

Use Tool