Independent reviews. IonBin has no partnerships with the tools on this page and was not paid for these listings. Our evaluations are our own, based on public documentation and our research. Product names are trademarks of their owners and are used for identification only. How disclosure works.

Evidence / Color contrast calculator

WebAIM Contrast Checker

A focused way to check a foreground/background pair before an attractive color choice becomes unreadable text.

Documentation reviewed

Source review

What this status means

Understand the resource

What it is.

WebAIM Contrast Checker takes foreground and background colors and reports a contrast ratio with text and interface-component thresholds. The tool comes from WebAIM, a nonprofit service center at Utah State University. It is useful because a precise pair-level result is easier to act on than a general instruction to make a screen more accessible.

When it is useful

Use it while choosing body text, secondary text, borders and controls, and when a design review needs a concrete answer about one pair. It also helps explain why a color can work for a large heading but fail for ordinary text.

A proposed application

Put it to work.

This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.

Try this

Check a proposed muted label, #777777, on #FFFFFF before using it in a dense settings form. Compare the normal-text result with a darker candidate, then record the approved token pair and check its hover, disabled and error contexts in the implemented page.

Result to aim for

A documented color-pair decision with the relevant text size and state, followed by page-level verification rather than an unexplained green checkmark.

Before you start

What you need.

  • The actual foreground and background values, including transparency where relevant.
  • A decision about the text or non-text use case and actual rendered size.
  • Separate checks for the live interface and other accessibility requirements.

The practical boundaries

What to watch for.

  • A passing pair does not evaluate text size, spacing, content, focus visibility, keyboard use or the rest of a page.
  • Use the actual background and composited color. Gradients, photographs, opacity and overlapping layers can make a single assumed pair misleading.
  • Do not round a failing ratio up to a threshold. In this sample #777777 on white displayed 4.47:1 and failed normal-text AA.

Review record

What we could establish.

  • Why included — 2026-10-19: WebAIM identifies itself as a Utah State University nonprofit service center established in 1999. Its specialist provenance and directly inspectable calculator make it an established reference; no recent popularity-growth claim is made.
  • Three synthetic color pairs were entered in the public calculator. The API, bookmarklet, website-audit submission and commercial evaluation service were not exercised.
Source coverage and runtime coverage are separate

The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.

Check current access, terms, licensing and data handling before using a resource with your own material.

Runtime and security evaluation

What the evaluation covers.

Bounded runtime checkedAccount-free ·

Three synthetic foreground/background pairs produced the expected extremes and near-threshold classifications in the public calculator. This is a bounded calculator check, not a website accessibility audit.

Methods: Public HTTP response · Public browser sample · Source review. A completed check covers the stated sample; it is not a safety certification.

Target
https://webaim.org/resources/contrastchecker/
Version or capture
Unversioned public hosted page sampled on 2026-10-19; no installed package version attested.
Integrity scope
Recorded document SHA-256 19069d55223e58b7caddca00d563fb9f251ebf159b16d76620f82e577bba2c9a. This is the HTML response only, not an integrity guarantee for scripts, dependencies or the whole service.

Test conditions

  • Fresh anonymous Chromium 155.0.8059.82 context on Windows; 1365 × 900 viewport; reduced motion requested.
  • GET and HEAD only; non-GET methods and WebSockets blocked. No owner browser session, account, credentials, private fixtures, uploads or purchases.
  • Only the named public controls and synthetic values were used. Screenshots and compact request observations were retained as review evidence.

Individual checks and observations

  1. Public document response

    pass

    Public HTTP response: Navigate to the recorded public target in a fresh anonymous browser.

    Observed: The sampled document returned HTTP 200 over HTTPS. Its response body SHA-256 was 19069d55223e58b7caddca00d563fb9f251ebf159b16d76620f82e577bba2c9a; this fingerprints only the recorded HTML response.

  2. Maximum-contrast pair

    pass

    Public browser sample: Enter #000000 foreground and #FFFFFF background in the public HEX fields.

    Observed: The tool displayed 21:1 and passed the displayed normal-text, large-text and graphical-object thresholds.

  3. Near-threshold pair

    pass

    Public browser sample: Enter #777777 on #FFFFFF and inspect the displayed ratio and classifications.

    Observed: The tool displayed 4.47:1: normal text failed AA and AAA; large text passed AA and failed AAA; graphical objects passed AA.

  4. Equal-color pair

    pass

    Public browser sample: Enter #FFFFFF foreground and background.

    Observed: The tool displayed 1:1 and failed all displayed contrast thresholds.

  5. Primary-source scope review

    pass

    Source review: Read the official pages and relevant repository or standard references linked below.

    Observed: Reviewed the calculator’s explanation and WebAIM’s institutional background. The three numeric cases were checked in the page, not inferred from documentation.

  6. Broader workflow and assurance coverage

    not-run

    Public browser sample: Keep authenticated, installation, private-data and broader accessibility workflows outside this bounded pass.

    Observed: The API, bookmarklet, WAVE URL submission, alpha blending edge cases, every color combination and any paid audit were not tested.

Security findings and boundaries

Passive observation of the sampled public pages, response headers and request destinations, plus the specific documented boundaries below. No intrusive scanning or security certification.

Observed · caution

Analytics and advertising requests

The sample requested Google font, tag, analytics and advertising origins. Six POST requests to analytics/advertising endpoints were blocked by the test guard; this is not a local-only or zero-telemetry claim.

Observed · info

Use pair values, not sensitive page content

Only synthetic HEX values were entered. The separate website-audit URL field and bookmarklet were not used. Do not infer that testing a color pair authorizes submission of a private application URL.

Practical advice · caution

Calculator output has a narrow boundary

Use the result as evidence about a specific color pair. It does not assess an authenticated page, protect uploaded content or validate a complete accessibility claim.

Practical caveats

  • Retain the actual ratio and the relevant text-size/state decision; do not round a failure into a pass.
  • Check the final page after colors are mapped to tokens and combined with images, transparency or gradients.

What remains untested

  • The API, bookmarklet, WAVE URL submission, alpha blending edge cases, every color combination and any paid audit were not tested.
  • One browser, one viewport and a short observation window; no cross-browser, assistive-technology or complete accessibility audit.
  • Proposed use-case examples in this review were not implemented as a production workflow.

Security limits

  • No backend, authenticated authorization, session isolation, vulnerability exploitation, dependency scan or account-data retention assessment was performed.
  • The GET/HEAD-only guard can change hosted behavior; blocked background traffic is reported rather than treated as a product defect. Request observations are a bounded sample, not proof of all data handling.

Evaluation sources

  1. Contrast checker and threshold explanation
  2. WebAIM institutional background

Download this evaluation record (JSON)

Follow the evidence

Sources and further reading.

  1. Contrast checker and threshold explanation
  2. WebAIM institutional background

Keep exploring

More in evidence.

View category

Documentation reviewed

abtest.design

Use reported experiments to form a better hypothesis.

Documentation reviewed

The A11Y Project

A practical starting point for turning accessibility intent into review tasks people can actually perform.

Documentation reviewed

Inclusive Components

An explanation-first reference for understanding the semantics and keyboard decisions inside familiar interface patterns.