Merriweft invoices: before and after

7 issues found on this page. Switch between the page today, the audit and the fix with the bar at the bottom, or press 1, 2 and 3.

1. 1

   Three filled buttons compete, and white on green reads at 3.3:1

   Fixing this makes the next step obvious: one filled button, New invoice, and every label readable

   3 filled buttons; 3.3:1 on Send reminders → 1 filled button; 6.02:1

   Evidence: measured contrast (MS-04) and seen

2. 2

   Gray text is hard to read

   Fixing this makes dates, emails and column titles readable for everyone

   2.54:1 on 40 pieces of text → 7.23:1

   Evidence: measured contrast (MS-04)

3. 3

   Amounts don't line up

   Fixing this makes amounts quick to compare, right-aligned with digits of equal width

   left-aligned, proportional digits → right-aligned, tabular digits

   Evidence: seen on the page

4. 4

   Status is shown by color alone

   Fixing this makes status clear to everyone, including people who can't tell red from green: each one says Paid, Due or Overdue

   a colored dot → a label and an icon

   Evidence: seen on the page (WCAG 1.4.1)

5. 5

   Row buttons are small, with vague names

   Fixing this makes row actions easy to hit, and each button names its invoice for screen readers

   20 x 20 px, "Send" → 32 x 32 px, "Send MW-1042"

   Evidence: measured target sizes

6. 6

   Corners, text sizes and colors are off the system

   Fixing this makes the page look like one product: every corner, size and color comes from Merriweft's tokens

   3 corner radii, 5 text sizes and 12 colors off Merriweft's tokens → none off the tokens

   Evidence: measured against the tokens (MS-09, MS-02, MS-08)

7. 7

   The chart repeats a number and shows no values

   Fixing this makes one place for each number, and a chart you can read: each week's total against September's average

   $112.5k shown twice; 4 bars, no values, 8 px labels at 1.47:1 → shown once; a value on every bar; 12 px labels at 7.23:1

   Evidence: seen on the page, and measured label colors

Made by OpenDesigner (review.py compare). The boxes come from the page itself (probe.js __od.marks), measured at 1280 px wide.