Studio
Accessibility Lab
WCAG contrast, color vision simulation, readability, dyslexia preview and touch-target checks.
Colors
#1f2937
#ffffff
#4f46e5
#ffffff
WCAG contrast
WCAG 2.1 · 1.4.3 (AA), 1.4.6 (AAA), 1.4.11 (non-text). APCA readouts are the WCAG 3 draft method and don't affect pass or fail.
- AaBody text14.67:1 · needs 4.5:1APCA Lc 101.5 · needs 75AAAA largeAAAAAA largeAPCA ok
- AaLinks6.28:1 · needs 4.5:1APCA Lc 80.5 · needs 75AAAA largeAAAAAA largeAPCA ok
- AaButton label6.28:1 · needs 4.5:1APCA Lc -85.7 · needs 60AAAA largeAAAAAA largeAPCA ok
- AaButton vs page (UI, 1.4.11)6.28:1 · needs 3:1APCA Lc 80.5 · needs 30APCA ok
Accessibility Lab
Designed for everyone
Good accessibility is good design. Clear contrast, comfortable type and generous targets help everyone read faster, tap with confidence and stay focused on what matters.
Read the accessibility guidelines before you ship.
Primary actionSecondary
Report
{
"tool": "DesignHub Accessibility Lab",
"settings": {
"colors": {
"text": "#1f2937",
"background": "#ffffff",
"accent": "#4f46e5",
"onAccent": "#ffffff"
},
"focusRing": "#6366f1",
"typography": {
"family": "Inter",
"size": 16,
"lineHeight": 1.5,
"letterSpacing": 0,
"wordSpacing": 0,
"weight": 400,
"measure": 640
},
"targets": [
{
"id": "t1",
"label": "Like",
"width": 32,
"height": 32
},
{
"id": "t2",
"label": "Share",
"width": 32,
"height": 32
},
{
"id": "t3",
"label": "Buy now",
"width": 120,
"height": 44
}
],
"targetGap": 8,
"palette": [
{
"name": "indigo",
"hex": "#0f172a"
},
{
"name": "indigo-2",
"hex": "#6366f1"
},
{
"name": "pink",
"hex": "#f472b6"
},
{
"name": "yellow",
"hex": "#ffc935"
},
{
"name": "emerald",
"hex": "#34d399"
}
]
},
"sections": {
"contrast": [
{
"check": "Body text",
"foreground": "#1f2937",
"background": "#ffffff",
"ratio": 14.67,
"required": 4.5,
"pass": true,
"wcag": {
"AA": true,
"AA large": true,
"AAA": true,
"AAA large": true
},
"suggestion": null,
"apca": {
"lc": 101.5,
"target": 75,
"pass": true,
"note": "APCA is a draft method for WCAG 3. Lc is positive for dark on light, negative for light on dark."
}
},
{
"check": "Links",
"foreground": "#4f46e5",
"background": "#ffffff",
"ratio": 6.28,
"required": 4.5,
"pass": true,
"wcag": {
"AA": true,
"AA large": true,
"AAA": false,
"AAA large": true
},
"suggestion": null,
"apca": {
"lc": 80.5,
"target": 75,
"pass": true,
"note": "APCA is a draft method for WCAG 3. Lc is positive for dark on light, negative for light on dark."
}
},
{
"check": "Button label",
"foreground": "#ffffff",
"background": "#4f46e5",
"ratio": 6.28,
"required": 4.5,
"pass": true,
"wcag": {
"AA": true,
"AA large": true,
"AAA": false,
"AAA large": true
},
"suggestion": null,
"apca": {
"lc": -85.7,
"target": 60,
"pass": true,
"note": "APCA is a draft method for WCAG 3. Lc is positive for dark on light, negative for light on dark."
}
},
{
"check": "Button vs page (UI, 1.4.11)",
"foreground": "#4f46e5",
"background": "#ffffff",
"ratio": 6.28,
"required": 3,
"pass": true,
"wcag": {
"AA": true,
"AA large": true,
"AAA": false,
"AAA large": true
},
"suggestion": null,
"apca": {
"lc": 80.5,
"target": 30,
"pass": true,
"note": "APCA is a draft method for WCAG 3. Lc is positive for dark on light, negative for light on dark."
}
}
],
"focusIndicator": {
"check": "Focus indicator (2.4.13, 1.4.11)",
"ring": "#6366f1",
"background": "#ffffff",
"component": "#4f46e5",
"ratioAgainstBackground": 4.46,
"ratioAgainstComponent": 1.4,
"required": 3,
"pass": false,
"suggestion": "#0d0047"
},
"gradientText": {
"check": "Text on the brand gradient (1.4.3)",
"gradient": "linear-gradient(in oklch 135deg, oklch(62% 0.2 277) 0%, oklch(72% 0.17 350) 50%, oklch(85% 0.15 85) 100%)",
"interpolation": "oklch",
"samples": 65,
"results": [
{
"text": "White",
"color": "#ffffff",
"worstRatio": 1.59,
"worstPosition": 100,
"worstBackground": "#fac547",
"required": 4.5,
"pass": false,
"passLarge": false
},
{
"text": "Black",
"color": "#000000",
"worstRatio": 5.44,
"worstPosition": 0,
"worstBackground": "#6c72fb",
"required": 4.5,
"pass": true,
"passLarge": true
},
{
"text": "Brand text",
"color": "#14151f",
"worstRatio": 4.7,
"worstPosition": 0,
"worstBackground": "#6c72fb",
"required": 4.5,
"pass": true,
"passLarge": true
}
]
},
"vision": [
{
"mode": "protanopia",
"pairs": [
{
"check": "Body text",
"ratio": 14.41,
"passAA": true
},
{
"check": "Links",
"ratio": 5.1,
"passAA": true
},
{
"check": "Button label",
"ratio": 5.1,
"passAA": true
}
]
},
{
"mode": "deuteranopia",
"pairs": [
{
"check": "Body text",
"ratio": 14.84,
"passAA": true
},
{
"check": "Links",
"ratio": 5.94,
"passAA": true
},
{
"check": "Button label",
"ratio": 5.94,
"passAA": true
}
]
},
{
"mode": "tritanopia",
"pairs": [
{
"check": "Body text",
"ratio": 14.62,
"passAA": true
},
{
"check": "Links",
"ratio": 5.54,
"passAA": true
},
{
"check": "Button label",
"ratio": 5.54,
"passAA": true
}
]
},
{
"mode": "grayscale",
"pairs": [
{
"check": "Body text",
"ratio": 14.67,
"passAA": true
},
{
"check": "Links",
"ratio": 6.28,
"passAA": true
},
{
"check": "Button label",
"ratio": 6.28,
"passAA": true
}
]
}
],
"paletteVision": {
"threshold": 0.06,
"colors": [
{
"name": "indigo",
"hex": "#0f172a"
},
{
"name": "indigo-2",
"hex": "#6366f1"
},
{
"name": "pink",
"hex": "#f472b6"
},
{
"name": "yellow",
"hex": "#ffc935"
},
{
"name": "emerald",
"hex": "#34d399"
}
],
"pass": true,
"modes": [
{
"mode": "protanopia",
"pass": true,
"pairs": []
},
{
"mode": "deuteranopia",
"pass": true,
"pairs": []
},
{
"mode": "tritanopia",
"pass": true,
"pairs": []
},
{
"mode": "grayscale",
"pass": true,
"pairs": []
}
]
},
"readability": {
"charactersPerLine": 80,
"readingEase": 42,
"gradeLevel": 10.5,
"checks": [
{
"check": "Body font size",
"value": "16px",
"verdict": "pass"
},
{
"check": "Line height",
"value": "1.50",
"verdict": "pass"
},
{
"check": "Characters per line",
"value": "≈80",
"verdict": "warn"
},
{
"check": "Letter / word spacing",
"value": "0em / 0em",
"verdict": "pass"
},
{
"check": "Reading ease",
"value": "42 · grade 10.5",
"verdict": "warn"
}
]
},
"textSpacing": {
"criterion": "WCAG 1.4.12 Text Spacing (AA)",
"note": "Content must not be clipped or overlap when a reader raises spacing to these values. Paragraph spacing (2x the font size) is applied only in the preview test.",
"checks": [
{
"check": "Line height",
"required": "1.5",
"current": "1.5",
"pass": true
},
{
"check": "Letter spacing",
"required": "0.12em",
"current": "0em",
"pass": false
},
{
"check": "Word spacing",
"required": "0.16em",
"current": "0em",
"pass": false
}
]
},
"motion": {
"criterion": "Reduced motion (prefers-reduced-motion)",
"note": "An effect that animates or moves in its exported CSS needs an @media (prefers-reduced-motion rule, so people who ask for less motion don't get it. Effects that don't move with the current Effects Lab settings aren't listed.",
"pass": true,
"checks": [
{
"check": "Skeleton",
"motion": "Animation",
"reducedMotionRule": true,
"pass": true
},
{
"check": "Button press",
"motion": "Transform transition",
"reducedMotionRule": true,
"pass": true
},
{
"check": "Card tilt",
"motion": "Transform transition",
"reducedMotionRule": true,
"pass": true
}
]
},
"touchTargets": {
"gap": 8,
"results": [
{
"label": "Like",
"size": "32×32",
"WCAG 2.5.8 (AA)": true,
"WCAG 2.5.5 (AAA)": false,
"note": "Meets 24×24 (AA) but not 44×44 (AAA)."
},
{
"label": "Share",
"size": "32×32",
"WCAG 2.5.8 (AA)": true,
"WCAG 2.5.5 (AAA)": false,
"note": "Meets 24×24 (AA) but not 44×44 (AAA)."
},
{
"label": "Buy now",
"size": "120×44",
"WCAG 2.5.8 (AA)": true,
"WCAG 2.5.5 (AAA)": true,
"note": "Meets 44×44 (AAA)."
}
]
},
"headings": {
"criterion": "Brand book heading structure",
"note": "Every exported brand book page has exactly one h1, no skipped heading level and no empty heading, checked on the generated HTML.",
"pass": true,
"checks": [],
"pages": 25
}
}
}