Should I remove all outlines?

Never remove focus indicators without replacing them. Use :focus-visible for keyboard-only rings.

Is contrast only design?

WCAG contrast is measurable. Aim for 4.5:1 on body text.

No. A plain anchor to #main is enough.

Show a clear ring only for keyboard focus.

Focus button

Tab to see the keyboard ring.

button:focus { outline: none; }
button:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: 3px;
}

Jump past navigation for keyboard users.

Skip link

Link appears when focused.

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 99; }

Respect OS motion settings.

Pulse box

Pulse disabled when reduced motion is preferred.

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none; }
}

Should I remove all outlines?: Never remove focus indicators without replacing them. Use :focus-visible for keyboard-only rings.
Is contrast only design?: WCAG contrast is measurable. Aim for 4.5:1 on body text.
Do skip links need JavaScript?: No. A plain anchor to #main is enough.