Modal Dialogs
Accessible modal dialogs with proper focus management, color usage, and brand styling.
Critical Rules Demonstrated
-
COLOR-001View Rule Details → -
A11Y-001View Rule Details →
Live Example
Confirm Action
Are you sure you want to delete this project? This action cannot be undone.
Payment Successful
Your payment of $149.00 has been processed successfully.
Unsaved Changes
You have unsaved changes. Do you want to save before leaving?
Brand Rules Applied
- COLOR-001: Warning modal uses Navy text on Citrus background - never white text on Citrus
- A11Y-001: All text maintains 4.5:1+ contrast ratio, focus states are clearly visible
Code
<div class="modal" role="dialog" aria-modal="true">
<div class="modal-header">
<h3>Confirm Action</h3>
<button class="close-btn" aria-label="Close">
<svg>...</svg>
</button>
</div>
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button class="btn-secondary">Cancel</button>
<button class="btn-primary">Confirm</button>
</div>
</div>