Fineuralab

Check Button Color Contrast

A color contrast example for buttons, hover states, and small interface text.

Worked example

Task context

A button uses a teal background and white text. Check the default and hover states before shipping the page.

Open the related tool: Color Contrast Checker

Input and output

Input colors

Default: #0f766e background, #ffffff text
Hover: #115e59 background, #ffffff text
Small label: 13px bold

Review result

Default contrast: review against WCAG AA for normal text
Hover contrast: compare separately
Small text: treat as normal text unless it meets large-text size rules

Checks before copying

  • Check each state separately: default, hover, disabled, and focused.
  • Small labels usually need stronger contrast than large headings.
  • Do not rely on color alone to communicate disabled or error states.

Lesson: Contrast is a state-by-state check. A color pair that passes in one state may fail in another.

Keep working

Color Contrast CheckerCheck foreground and background color contrast against WCAG AA readability thresholds. Image Publishing Toolkit WorkflowA local-first workflow for compressing images, preparing QR codes, and checking colors before publishing. Color Contrast Checker for AccessibilityCheck whether text and background colors are readable enough before publishing UI changes. Examples LibraryBrowse worked examples for core browser tools. Workflow HubsBrowse task-based tool workflows.

Reviewed and updated: June 23, 2026