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).
- AaBody text14.67:1 · needs 4.5:1AAAA largeAAAAAA large
- AaLinks6.28:1 · needs 4.5:1AAAA largeAAAAAA large
- AaButton label6.28:1 · needs 4.5:1AAAA largeAAAAAA large
- AaButton vs page (UI, 1.4.11)6.28:1 · needs 3:1
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"
},
"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
},
"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
},
{
"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
},
{
"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
},
{
"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
}
],
"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
}
]
}
],
"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"
}
]
},
"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)."
}
]
}
}
}