Skip to content
Hex Calculator

Accessibility

Our accessibility commitment and the specific WCAG 2.2 practices used across every calculator on this site.

Our Commitment

Every calculator on this site is built to be usable with a keyboard alone, with a screen reader, and at 200% browser zoom — not as an afterthought, but as part of the same shared components every page is built from.

Standards We Aim to Follow

We target WCAG 2.2 Level AA. Color contrast on this site isn't just assumed — every text/background color pair in the design system was checked with the actual WCAG contrast formula before shipping, including a failure we found and fixed in the footer copyright text (it was measured at 2.45:1, well under the 4.5:1 minimum, and corrected).

Accessible Calculator Design

  • Every input has a visible, programmatically associated label — not a placeholder used as a label.
  • Results update in an aria-live region, so screen reader users hear the answer as it changes, not just sighted users seeing it change.
  • Invalid input sets aria-invalid on the field and links the error message to it with aria-describedby, with role="alert" on the message itself.
  • Animations and transitions respect prefers-reduced-motion.

Keyboard Navigation

A "Skip to content" link lets keyboard users bypass the header on every page. Every interactive element — links, buttons, calculator tabs, the mobile menu — has a visible focus ring, and none of them rely on mouse-only hover states to be usable.

Screen Reader Support

Pages use semantic HTML first — real <button>, <label>, and <details> elements — and ARIA attributes only where semantic HTML isn't enough, such as marking decorative icons with aria-hidden. Heading levels are sequential on every page, with no skipped or decorative-only headings.

Color Contrast and Responsive Design

The layout is built mobile-first and reflows down to small screens, including a dedicated mobile navigation menu. Text and interface colors meet at least a 4.5:1 contrast ratio against their background, checked individually rather than assumed from the color palette.

Reporting Accessibility Issues

If you hit a barrier using this site with a keyboard, screen reader, or any assistive technology, tell us on the Contact page. Include what you were trying to do and what happened — that's the fastest path to a fix.

Ongoing Improvements

Accessibility checks run as part of building every new page on this site, not as a one-time audit. As the tool catalog grows, each new calculator gets the same review for labels, contrast, and keyboard support before it's published.