Design review: Checkout (mobile)

Problem: Grey text on grey, sampled #9E9E9E on #BDBDBD = 1.43:1 (needs 4.5:1). It looks disabled.

Why it matters: The main action of the screen is the hardest thing to see; shoppers will wait for it to "enable" or leave.

Fix: Use the primary style: #2563EB background, #FFFFFF text (5.17:1).

Problem: PayPal is the strongest button on the screen, so it competes with, and beats, the main card payment.

Why it matters: Two primary-looking actions side by side slow the decision and push most people to the wrong one.

Fix: Make PayPal an outlined secondary button below the main pay button, full width.

Problem: Placeholders are the only labels; they vanish when typing and are very light, sampled #C7C7CC on white = 1.68:1.

Why it matters: Once a field is filled, nobody can check what it was for; screen readers and low-vision users miss the field names (WCAG 3.3.2, 1.4.3).

Fix: Add a 13px label above each field in #1D1D1F; keep placeholders only for examples like "10-digit mobile number".

Problem: Only a red border shows the error; there is no message.

Why it matters: Users cannot tell what is wrong with "98765", and colour alone fails for colour-blind users (WCAG 1.4.1, 3.3.1).

Fix: Show "Enter a 10-digit mobile number" under the field with an error icon, and announce it to screen readers.

Problem: The buttons are 20×20 pt, below the 24 px web minimum and far below 44 pt.

Why it matters: Hard to tap on a phone; mis-taps change the order by mistake.

Fix: Make each button 44×44 pt (the visible box can stay small with a larger tap area).

Problem: No back or close control, and no way to edit the cart from here.

Why it matters: Users who want to change their order have to use the browser back button and may lose what they typed.

Fix: Add a back arrow on the left of the header with an accessible name "Back to cart".

Problem: Total uses the same size, weight and colour as Subtotal and Delivery.

Why it matters: The number people check before paying does not stand out.

Fix: Make the Total row 17px semibold in #1D1D1F, with a divider above it.

Problem: The promo code entry comes after the pay buttons, in 12px text.

Why it matters: Shoppers find it after deciding to pay, and the total they saw changes afterwards.

Fix: Move it into the order summary card above Total, at 15px.

Problem: 11px text, sampled #B0B0B5 on white = 2.16:1.

Why it matters: Colour and delivery time are useful to confirm, but hard to read.

Fix: Use 13px in #6E6E73 (5.07:1).

Problem: Inputs use a 3px radius, cards 14px and buttons a full pill.

Why it matters: Mixed radii make the screen feel assembled from different kits.

Fix: Use the card radius family: 10px for inputs, keep pills only for buttons.