test
""") w.show() sys.exit(app.exec_()) Running this may produce large window. Hard to view. But we can check output. I need to see the window output; but maybe not needed. But the code may produce the text as above. The content may not display due to missing Qt web engine environment? But we have. Nevertheless, the answer may be too heavy. We can provide a summary: "You should refer to ISO 7001 for universal door symbol; you can find it in any standard icon library; for physical signs use black on white or white on black; for digital use high contrast. Use- The only truly “standard” door icon is the ISO 7001 universal‑sign symbol.
- For digital UI the best‑practice route is to use an SVG or an icon‑font that implements that ISO shape (or the equivalent “door‑open” emoji U+1F6AA).
- Follow the colour‑contrast ratios of ISO 7001 (≥ 3 : 1) and WCAG 2.1 (≥ 4.5 : 1 with text, ≥ 3 : 1 without).
- Keep the geometry simple – rectangle + hinge line + optional handle circle – and scale it with vector graphics so it looks sharp from 2 cm exit sign to 24 px app icon.
1. What the symbol actually looks like
| Context | Symbol | Key visual cues | Notes | |---------|--------|-----------------|-------| | **ISO 7001 public‑info** | 2‑D doorway (open) + handle | Two vertical lines for hinges, a small handle (circle or line) | Mandatory for evacuation signage worldwide | | **NFPA 302 fire plans** | Door swing direction indicated by a single vertical line | Small circle = automatic door, slash = latch | Helps firefighters spot safe routes | | **Digital UI** | `U+1F6AA` (🚪) or Font Awesome `fa-door-open` | Same geometry, often black on white or white on black | Use with `2. Design fundamentals
| Guideline | Why it matters | How to implement | |-----------|----------------|------------------| | **Simplicity** | Icons must be recognisable at 1 mm and at 20 cm | Stick to a single rectangle, one hinge line, optional handle | | **Contrast** | Human eye detects high contrast better, especially in emergencies | 3 : 1 ratio for ISO‑7001, 4.5 : 1 if there is accompanying text (WCAG 2.1) | | **Scalability** | One icon should work from 2 cm exit sign to 24 px mobile icon | Use SVG or an icon‑font with consistent stroke width (e.g. 0.15 mm at 72 dpi) | | **Colour‑independence** | Colour alone can be mis‑read in different cultures | Base shape on geometry; use colour as a secondary cue only | > **Reference:** WCAG 2.1 – *Perceivable, Operable, Understandable, Robust* (https://www.w3.org/TR/WCAG21/) ---3. Recommended colour schemes
| Context | Background | Icon colour | Contrast ratio | Why | |---------|------------|-------------|----------------|-----| | **Exit sign** | White (or a wall finish) | Black (or bright yellow) | ≥ 3 : 1 (ISO 7001) | High visibility from 5 m | | **Indoor UI** | Light grey | Dark grey | ≥ 4.5 : 1 with text | Meets WCAG for icons with text | | **Night mode** | Black | White | ≥ 3 : 1 | Keeps the icon readable in low light | > **Reference:** ISO 7001 colour guidelines (section 6) ---4. Implementing the icon on a websitehtml
``` *Add a visible `alt` or `aria-label` so screen readers announce “Open door”.* > **Reference:** Web Accessibility Initiative – ARIA 1.1 spec (https://www.w3.org/TR/wai-aria/) ---5. Common pitfalls
| Pitfall | Fix | |---------|-----| | Icon only uses colour to signal “exit” | Add a clear shape; use white‑on‑black or black‑on‑white so it is visible in all lighting | | Hand‑drawn door in a state diagram | Switch to a standard ISO shape or provide a legend | | Using the emoji U+1F6AA in UI without an alt text | Provide a proper label; emoji may not be rendered consistently on all devices | ---6. Quick‑start cheat sheet
- Print / physical sign – Use the ISO 7001 SVG and print it on a 2 cm × 3 cm plate (minimum).
- Digital UI – Import Font Awesome
fa-door-openor Material Iconsdoor(https://material.io/resources/icons). - Accessibility – Wrap the icon in an
withaltoraria-label. - Colour – Stick to black/white; if you want colour (yellow, orange) keep the contrast ≥ 3 : 1.
- Sizing – For signs: 2 cm (height) on a wall, 5 cm for large‑format signs. For web: 24 px × 24 px is the default, but scale the SVG as needed.
Bottom line
- Use the ISO 7001 doorway shape for the evacuation sign – that is the only globally accepted sign.
- Re‑use the same geometry in your web UI (via SVG or icon‑font).
- Keep geometry simple (hinge line + handle), ensure ≥ 3 : 1 contrast, and always provide an alt/aria‑label.
No comments yet. Be the first to comment!