Skip to main content
Nexus Inclusion - home

Free NZ Colour Contrast Checker

NZ Web Accessibility Standard

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 Government Content

People use government websites to find essential information, complete applications and access support. Clear contrast helps people with low vision read instructions and form labels. Check your colours when creating or updating content for people in Aotearoa New Zealand.

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

Learn

Read Contrast Results for NZ Government Content

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.

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.

The NZ Government Web Accessibility Standard 1.2 requires WCAG 2.2 AA for mandated organisations, with stated exceptions. Use contrast checks when creating public information and internal web content.

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 public information and government web forms.
Compare Plans

How to Improve Insufficient Colour Contrast

Start by darkening the text or lightening its background, then check the pair again. For a government application 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.

Check instructions and field labels in every language version you publish. When text wraps or font sizes change, verify the result against the final presentation. Include internal web forms used by staff in the review where the Standard applies.

Test Your Revised Colours

Colour Contrast Questions

  • The NZ Government Web Accessibility Standard 1.2 requires WCAG 2.2 AA for mandated organisations, with stated exceptions. Its text contrast thresholds are at least 4.5:1 for normal text and 3:1 for large text. A contrast check covers only part of the Standard.

  • Yes, where your organisation is mandated to meet the Standard, its scope includes internally facing web pages. Check staff forms and instructions as well as public-facing services, applying the Standard’s stated scope and exceptions.

  • The colour ratio is identical when the colour pair is identical. Still review both rendered pages. Text length, wrapping, typeface or size may differ, changing the applicable text threshold or the background behind the words.

  • 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. Build page-level checks into public information, staff content and government web forms.

Compare Plans

Identify objects, colours and other elements in your images. Use the analysis to support reviews of government information, service illustrations and other visual content.

Explore Image Analysis

Make Accessibility Part of Your Everyday Work

Continue Your Accessibility Review

View all

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

Accessibility compliance guides

Explore wider accessibility guidance to support your work on New Zealand digital content.

Explore accessibility guidance