WCAG Compliance Calculator

Score your website's WCAG 2.1 compliance across contrast, alt text, keyboard navigation, and ARIA labels.

Contrast Ratio

Text Size (pt)

Has Alt Text (0=No, 1=Yes)

Keyboard Navigable (0=No, 1=Yes)

ARIA Labels (0=No, 1=Yes)

Tab to move between fields

Compliance Score (%)

80%

WCAG Level (0=None, 1=A, 2=AA, 3=AAA)

Checks Passed4

Checks Failed1

How to Use This Calculator

Enter Contrast Ratio — use a color contrast checker tool to find the ratio between your text and background colors.
Set Text Size (pt) — text 18pt or larger (or 14pt bold) qualifies as large text with relaxed contrast requirements (3:1 instead of 4.5:1).
Set Has Alt Text to 1 if all meaningful images have descriptive alt attributes in your HTML.
Set Keyboard Navigable to 1 if all interactive elements (buttons, links, forms) are operable without a mouse.
Set ARIA Labels to 1 if dynamic content regions use proper ARIA roles and labels.
Review Compliance Score (%) and WCAG Level — aim for Level AA (score ~80%) for legal compliance in most jurisdictions.

How the result changes with Contrast Ratio

Contrast Ratio: Color contrast ratio between text and background (1:1 to 21:1)
Text Size (pt): Font size in points. 18pt+ is considered large text with relaxed contrast requirements.
Has Alt Text (0=No, 1=Yes): Whether all images have descriptive alt text
Keyboard Navigable (0=No, 1=Yes): Whether all interactive elements are keyboard accessible
ARIA Labels (0=No, 1=Yes): Whether ARIA labels are properly applied to dynamic content

Identify Input Parameters
4 parameters
Contrast Ratio = 4.5, Text Size (pt) = 16, Has Alt Text (0=No, 1=Yes) = 1, Keyboard Navigable (0=No, 1=Yes) = 1 = 5 input(s) provided
Calculate Compliance Score
Compliance Score
80 = 80
Calculate WCAG Level
2 = 2
Calculate Checks Passed
Checks Passed
4 = 4
Calculate Checks Failed
Checks Failed
1 = 1