Skip to main content
Nexus Inclusion - home

Free AODA Colour Contrast Checker

Accessibility for Ontarians with Disabilities Act

Contrast Ratio

—

Preview

Contrast Preview

This sample text helps you evaluate colour contrast and readability. A good colour combination should remain clear and comfortable to read for all users.

Example CTA

Summary

  • Large Text

    (≥ 18.5 px / ≥ 24px bold)

    AA —
    PASS

  • Normal Text

    (< 18.5 px / < 24px bold)

    AA —
    PASS

  • UI Components

    (icons, borders, controls)

    AA —
    PASS

Why Colour Contrast Matters for Ontario Websites

People need to read your content to find information, fill in forms and use your services. Clear contrast helps people with low vision distinguish text from its background. Checking your colours is a practical part of making your Ontario website more accessible.

Checking contrast early also helps teams avoid repeating inaccessible colour combinations across templates, components and published pages.

Learn

Understand Your AODA Text Contrast Result

The contrast ratio measures the difference between your foreground and background colours. At WCAG AA, normal text needs at least 4.5:1 and large text needs 3:1. Large text is at least 18pt regular or 14pt bold, equivalent to 24px or approximately 18.67px.AAA raises the text thresholds to 7:1 for normal text and 4.5:1 for large text. Use the result for the text as it appears on your page. A pair can pass for a large heading and fail for smaller body text.WCAG 2.1 and 2.2 AA also require 3:1 for visual information needed to identify controls, their states and meaningful graphics against adjacent colours, subject to exceptions. This non-text result is separate from the text result.Ontario’s AODA website requirements use WCAG 2.0 AA for covered websites and content, with specified exceptions. Normal text needs at least 4.5:1 contrast and large text needs 3:1. This colour-pair check supports that review; it does not determine AODA compliance.For a check without regional guidance, use our general colour contrast checker.

Check Another Colour Pair

Choose How You Check Contrast

Check an individual element while you browse, or review contrast across a webpage in the Nexus Inclusion platform.

Free Contrast Checker Browser Extension

Inspect individual page elements with our free browser extension. Use it to check contrast where your content appears, then review the result in context.
Get the Browser Extension

Full Page Colour Contrast Checker

Review contrast across a webpage with our paid Full Page Colour Contrast Checker. Add page-level checks to your work on Ontario service pages and forms.
Compare Plans

How to Improve Insufficient Colour Contrast

Start by darkening the text or lightening its background, then check the pair again. For an Ontario service form label, #777777 on white (#FFFFFF) gives approximately 4.48:1 and fails AA for normal text. Changing the text to #555555 gives approximately 7.46:1, passing both AA and AAA text contrast thresholds.Review the labels and instructions people need to complete an application. Recheck shared templates when a banner, background or brand colour changes, including any French-language version you provide.

Test Your Revised Colours

Colour Contrast Questions

  • The WCAG 2.0 AA text contrast criterion requires at least 4.5:1 for normal text and 3:1 for large text. The AODA website rules apply to designated public sector organisations and businesses or non-profits with 50 or more employees, subject to scope and exceptions.

  • The non-text contrast criterion was introduced in WCAG 2.1. It is an additional useful check rather than part of AODA’s WCAG 2.0 website baseline. Keep the text and non-text results separate when recording your review.

  • Yes. The WCAG colour calculation works wherever your website is used. AODA is Ontario legislation, however, so a result on this page does not establish which accessibility obligations apply in another province or to a federally regulated organisation.

  • Use the unrounded value to decide pass or fail. A ratio below 4.5:1 does not meet the 4.5:1 requirement, even if a rounded display shows 4.5. Aim above the minimum when choosing a revised colour pair.

  • A single pair checks only one background colour. Review the lowest contrast behind the text across the image or gradient and at different screen sizes. A solid background behind the words can make contrast more predictable.

  • No. This tool checks your selected colour pair. Use the free browser extension to inspect individual elements, or the paid Full Page Colour Contrast Checker to review contrast across a webpage. Wider accessibility testing is still needed.

Explore Our Tools for Digital Accessibility

Explore All Features

Review contrast across a webpage with our paid Full Page Colour Contrast Checker. Add page-level checks to your team’s work on Ontario website content and online services.

Compare Plans

Identify objects, colours and other elements in your images. Use the analysis to support reviews of public information, product images and service content on your Ontario website.

Explore Image Analysis

Make Accessibility Part of Your Everyday Work

Continue Your Accessibility Review

Start

WCAG Explained

Understand the guidelines behind contrast checks and explore the other requirements that help people access and use your content.

Explore WCAG

Free Website Accessibility Scan

Check your homepage for automatically detectable accessibility issues. Use the findings to plan your next checks alongside your contrast review.

Scan Your Homepage

AODA accessibility guide

Explore the wider AODA requirements for Ontario organisations alongside your contrast checks.

Explore accessibility guidance