Automated SEO and accessibility checkers save hours during site audits, until an edge case in CSS inheritance or string tokenization gives editors a false green or a false alarm.

While auditing client websites at site-uri.ro and debugging WordPress editor workflows, I ran into two subtle bugs in widely used open-source tooling: one in WordPress Gutenberg's Block Inspector contrast checker, and one in Yoast SEO's keyphrase counting logic. Both fixes are now upstream PRs (WordPress/gutenberg#86702 and Yoast/wordpress-seo#23820).

1. Inline styles miss inherited CSS in WCAG contrast checks

Under WCAG 2.1 AA, contrast thresholds depend on rendered size and font weight:

  • Normal text requires at least 4.5:1.
  • Large text requires at least 3.0:1 (24px or larger at normal weight, or roughly 18.66px and larger when bold at weight 700 or higher).

When an inspector reads element.style.fontSize, it only sees inline style attributes. Block themes using theme.json and preset classes like has-xx-large-font-size inherit typography from stylesheets and CSS custom properties, so element.style.fontSize is empty. A 32px heading styled by a theme preset then gets checked against 4.5:1 instead of 3.0:1 and fails validation incorrectly.

Reading computed styles fixes inherited rules and relative units like rem or clamp():

function isLargeText( node ) { const { fontSize, fontWeight } = window.getComputedStyle( node ); const sizePx = parseFloat( fontSize ); const weightNum = fontWeight === "bold" ? 700 : parseInt( fontWeight, 10 ); const isBold = ! Number.isNaN( weightNum ) && weightNum >= 700; return sizePx >= 24 || ( isBold && sizePx >= 18.66 ); }

2. Deduplicating words breaks repeated-word keyphrases

Multi-word keyphrases sometimes repeat a token, such as "bora bora" or "new york new york".

If a keyphrase analyzer deduplicates words into unique word-form regexes and verifies that each unique word appears in a sentence, "Welcome to Bora." matches the single unique token bora and reports a false full match. Separating unique-word morphological checks from sequential non-overlapping phrase matching (matchAll) ensures "Bora" does not satisfy "bora bora" across body copy, meta descriptions, and image alt text.

Takeaways

  1. Test UI audit rules against cascaded CSS and theme.json presets, not inline style stubs.
  2. Add duplicate-word phrases to tokenizer and regex test suites.
  3. Send fixes upstream when checker logic diverges from browser rendering.