Two pre-launch checks catch more front-end regressions in ten minutes than almost any other QA pass: verifying that text and interactive controls meet WCAG 2.1/2.2 contrast ratios, and checking that <title> and <meta name="description"> tags don't truncate mid-word in Google search results.
Both checks are governed by exact math: relative luminance ratios for contrast, and rendered pixel width for SERP snippets.
WCAG AA vs. AAA Contrast Ratio Thresholds (4.5:1, 3:1, and 7:1)
WCAG 2.1 and 2.2 Success Criterion 1.4.3 (Contrast Minimum, Level AA) and 1.4.6 (Contrast Enhanced, Level AAA) compute contrast from the relative luminance (L1 for the lighter color, L2 for the darker color) on a scale from 1:1 (invisible, same color) to 21:1 (pure black #000000 on pure white #FFFFFF).
WCAG Contrast Ratio Formula: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where relative luminance L = 0.2126 * R + 0.7152 * G + 0.0722 * B after linearizing each 8-bit sRGB channel.
| Element Type | Size Definition in CSS (px at 96 DPI) | WCAG Level AA Minimum | WCAG Level AAA Target |
|---|---|---|---|
| Normal Body Text | Under 24px regular, or under 18.66px bold (700) | 4.5 : 1 | 7.0 : 1 |
| Large Text (Headings) | 24px+ (18pt+) regular, or 18.66px+ (14pt+) bold | 3.0 : 1 | 4.5 : 1 |
| UI Components & Icons (WCAG 1.4.11) | Input borders, focus rings, standalone icons, chart segments | 3.0 : 1 against adjacent surface | 4.5 : 1 (recommended) |
| Incidental / Disabled / Logos | Disabled controls, pure decoration, brand wordmarks | Exempt | Exempt |
A common design-system trap is muted gray secondary text on tinted cards. For example, #6B7280 on pure white (#FFFFFF) passes AA at 4.83:1, but place that exact same #6B7280 text inside a soft purple card (#F6F3FF) and the ratio drops to 4.39:1, failing Level AA for normal text. Test your foreground ink against the actual card background hex, not just #FFFFFF.
2026 Google Title Link and Meta Description Pixel Limits
According to Google Search Central's title link and snippet documentation, Google does not enforce a hard character limit inside HTML <title> or <meta name="description"> tags. Instead, Google's rendering container truncates text that exceeds the available pixel width on desktop and mobile SERPs.
Practical Safe Bounds (2026): Keep <title> between 50 and 60 characters (under 580px rendered width) and <meta name="description"> between 120 and 158 characters (under 920px desktop / 680px mobile).
Why do some 58-character titles get rewritten or cut off with ... while 63-character titles display in full? Proportional font metrics. In Google's desktop SERP font (20px Arial/Google Sans), an uppercase W is 19px wide, whereas a lowercase i or l is only 4px wide.
My recommendation for technical and tool pages: put the primary search query and differentiator in the first 42 characters, and use a single pipe separator ( | Brand) at the tail. If Google truncates the last 12 characters on a narrow mobile viewport, the user still reads the complete value proposition.
Preview how your exact title and description render in desktop and mobile pixel containers before publishing:
If you are drafting metadata for a batch of new landing pages or blog guides, generate structured descriptions that stay inside the 120 to 158 character window:
Pre-Launch On-Page Verification: Self-Referencing Canonicals
Before requesting indexing in Google Search Console, verify that every indexable URL outputs a single self-referencing <link rel="canonical" href="https://..."> tag in <head> using the exact protocol (https://) and trailing-slash convention listed in your XML sitemap. Mismatched canonicals between HTML and sitemap.xml are one of the top reasons Google reports *"Duplicate, Google chose different canonical than user."*