Docketbriar / practical guide

Color contrast for law firm websites

A color contrast flag is a reason to inspect a specific part of a page. This guide explains common patterns, useful WCAG reference points, and practical next steps for a small firm.

This is educational information, not legal advice or a compliance determination. It offers no promise of legal protection and does not guarantee compliance with the ADA, WCAG, or any other law or standard.

Start with the page

What a contrast finding can mean

A finding commonly points to text and its background having too little light-dark difference for some people to read comfortably. A warning is a starting point for review, not a conclusion about a whole website or a firm’s legal obligations.

Color contrast is about the lightness of two colors as well as their hue. Two colors can look different to one person and still have too little light-dark contrast for another person to read the text easily.

Automated checks can help locate possible problems, but they do not assess every page state or prove that a site is accessible. The U.S. Department of Justice recommends using automated checkers carefully and pairing them with manual review.

Technical reference points

Three numbers to keep in view

These are WCAG 2.2 reference points, not a complete accessibility review or a legal test for your firm.

Most text
4.5:1

WCAG 2.2 Success Criterion 1.4.3 sets this minimum for ordinary text and images of text.

Large text
3:1

The minimum is lower for large text: at least 18 point regular or 14 point bold (about 24px and 18.7px, respectively).

Meaningful controls and graphics
3:1

WCAG 2.2 Success Criterion 1.4.11 uses 3:1 against adjacent colors for visual information needed to identify a control, its state, or a meaningful graphic.

Common review patterns

What to look for on a firm website

  • Pale text on a light surface

    Small gray text for contact details, disclaimers, captions, or form hints can blend into a white or pale background.

    Practical next step: Check the actual foreground and background colors at the rendered size. Darken the text or adjust the surface, then check the smallest text again.

  • Brand color used for small text

    A bright accent may work well for a large heading or decoration but have too little contrast when used for small navigation, links, or button labels.

    Practical next step: Keep the brand hue where it works, and choose a darker text shade or a different background for small labels and controls.

  • Controls or important icons that disappear

    A button outline, input boundary, selected state, or meaningful icon may be hard to distinguish from nearby colors even when the text passes.

    Practical next step: Review the visible parts needed to recognize and use the control. For relevant non-text components and graphics, check the 3:1 reference in WCAG 2.2 Success Criterion 1.4.11.

  • Color is the only signal

    Red text alone may mark a required field or an error; green alone may mean a task is complete. This is a separate issue from the contrast ratio.

    Practical next step: Add a visible text label, icon, pattern, or other cue so the meaning is still clear without distinguishing the color.

  • A passing default hides a weaker state

    A link, field, or button can look different on hover, keyboard focus, selection, error, or over an image or gradient.

    Practical next step: Check the actual page in each state and wherever the background changes. For an image or gradient, inspect the text over its lightest and darkest areas.

A practical process

Review a finding from start to finish

  1. Open the exact page and note the specific text, control, icon, or state that was flagged.
  2. Record the foreground and background colors that appear together in normal use. Include the background behind the text when it is a gradient or image.
  3. Check text size and weight before choosing the WCAG 2.2 reference point. Do not round a result up to make it pass.
  4. Make a focused design change, such as darkening text, lightening its surface, increasing text size or weight, or strengthening a control boundary.
  5. Review the change on the live page at desktop and mobile sizes, then check links, buttons, form errors, selected states, and keyboard focus.
  6. Keep another cue beside color when color communicates meaning. A contrast adjustment alone does not fix a color-only signal.
  7. Retest representative pages and states. A scan or calculator can help with individual pairs, but neither one alone establishes overall accessibility or legal compliance.

Scope and limits

How to read the legal context

The Department of Justice says the ADA applies to businesses open to the public and that inaccessible website features can affect access to a business’s online goods and services. Its web guidance says it has not set detailed web standards for businesses and points to WCAG as a helpful technical reference.

That general guidance does not decide how the law applies to a particular firm, website, service, contract, or jurisdiction. Use the sources below for further reading, and speak with qualified counsel about your firm’s circumstances.

Further reading

Sources behind this guide

For small law firms

Need to discuss a broader website review?

Use Docketbriar’s baseline audit request form to share details about your firm and website. It starts a conversation about scope and possible next steps.

Request a baseline audit