Icon Design Quality Control & Assurance 2 — Questions and Answers
Question 1: Which metric best measures icon legibility at small sizes during quality review?
- File size in kilobytes
- Recognition accuracy at 16px (Correct answer)
- Number of anchor points
- Color palette count
Correct answer: Recognition accuracy at 16px
Recognition accuracy at 16px directly measures whether an icon communicates its meaning at the smallest common display size.
Question 2: During QA, an icon looks correct in a design tool but renders blurry on a 1x screen. What is the most likely cause?
- Wrong export format
- Paths not aligned to pixel grid (Correct answer)
- Too many colors used
- Missing metadata
Correct answer: Paths not aligned to pixel grid
Sub-pixel path alignment causes anti-aliasing blur when rendered at 1x because edges fall between pixels.
Question 3: What is the purpose of a 'icon regression test' in a design system?
- Measuring download speed
- Detecting unintended visual changes after updates (Correct answer)
- Counting total icons
- Checking brand color compliance
Correct answer: Detecting unintended visual changes after updates
Regression tests compare screenshots of icons before and after changes to catch unintended visual modifications.
Question 4: An icon set fails accessibility QA. Which fix directly addresses contrast requirements?
- Reducing stroke width
- Increasing color contrast ratio to at least 3:1 against background (Correct answer)
- Adding drop shadows
- Switching to outline style
Correct answer: Increasing color contrast ratio to at least 3:1 against background
WCAG 2.1 requires graphical components like icons to have at least a 3:1 contrast ratio against adjacent colors.
Question 5: Which technique helps QA teams verify icon consistency across an entire library of 500+ icons?
- Manual side-by-side inspection
- Automated visual diffing tools (Correct answer)
- User focus groups
- A/B testing in production
Correct answer: Automated visual diffing tools
Automated visual diffing tools can efficiently compare hundreds of icons against a baseline to detect inconsistencies.
Question 6: What does 'icon affordance' mean in the context of quality assurance?
- The file size budget allocated per icon
- The degree to which an icon visually suggests its function (Correct answer)
- The number of supported platforms
- The licensing cost of an icon set
Correct answer: The degree to which an icon visually suggests its function
Affordance refers to how well an icon's visual design implies what action or object it represents to users.
Question 7: During QA, icons appear correct on macOS but misaligned on Windows. What is the most likely root cause?
- Font rendering differences
- OS-level pixel density handling and sub-pixel rendering differences (Correct answer)
- Different browser engines
- Color profile mismatch
Correct answer: OS-level pixel density handling and sub-pixel rendering differences
Windows and macOS handle sub-pixel rendering and DPI scaling differently, causing alignment discrepancies across platforms.
Icon Design Quality Control & Assurance 2
Which metric best measures icon legibility at small sizes during quality review?