# 3.4 Risk Communication
Users must understand risks before committing.
## Success Criteria
### 3.4.1 Unverified Contract Flagging (Level A)
**Requirement**: Interactions with unverified contracts must be clearly flagged with accessible warnings before any transaction.
**Intent**: Unverified contracts could be malicious. Users need clear warning.
**Benefits**:
- **All users**: Security awareness
- **New users**: Learn to recognize risks
- **Cognitive disabilities**: Clear risk signals
**Techniques**:
```tsx
function ContractVerificationStatus({ address }: { address: string }) {
const verification = useContractVerification(address);
if (verification.status === 'verified') {
return (
<div className="verification verified">
<CheckIcon aria-hidden="true" />
<span>Verified Contract</span>
<span className="sr-only">
This contract's source code has been verified on the block explorer.
</span>
</div>
);
}
return (
<div
className="verification unverified"
role="alert"
>
<WarningIcon aria-hidden="true" />
<div className="warning-content">
<strong>Unverified Contract</strong>
<p>
This contract's source code has not been verified.
This means we cannot confirm what it does.
</p>
<details>
<summary>What does this mean?</summary>
<p>
Verified contracts have publicly visible code that anyone can
review. Unverified contracts could contain hidden malicious code
that steals your funds.
</p>
<p>
Only proceed if you trust the source of this contract.
</p>
</details>
</div>
</div>
);
}
<TransactionReview>
<ContractVerificationStatus address={tx.to} />
{!isVerified && (
<div className="unverified-actions">
<label>
<input
type="checkbox"
checked={acknowledgedRisk}
onChange={setAcknowledgedRisk}
required
/>
I understand this contract is unverified and may be risky
</label>
<button
onClick={proceed}
disabled={!acknowledgedRisk}
>
Proceed Anyway
</button>
</div>
)}
</TransactionReview>
```
**Failures**:
- No indication of verification status
- Warning only visual (no screen reader support)
- Can proceed without acknowledgment
---
### 3.4.2 DeFi Risk Explanations (Level AA)
**Requirement**: Complex DeFi risks (impermanent loss, liquidation, smart contract risk) must be explained in plain language with concrete examples.
**Intent**: DeFi risks are complex and often underestimated. Clear explanations enable informed decisions.
**Benefits**:
- **All users**: Understand what they're risking
- **New users**: Learn before losing
- **Cognitive disabilities**: Concrete examples aid understanding
**Techniques**:
```tsx
<ImpermanentLossExplainer>
<h3>Impermanent Loss Risk</h3>
<div className="risk-explanation">
<p>
<strong>What is impermanent loss?</strong>
When you add tokens to a liquidity pool, you might end up with
less value than if you had just held the tokens.
</p>
<div className="example">
<h4>Example:</h4>
<p>You deposit $1,000 of ETH and $1,000 of USDC (total: $2,000)</p>
<p>If ETH doubles in price:</p>
<ul>
<li>Just holding: Your ETH is now $2,000, total $3,000</li>
<li>In the pool: You'd have about $2,828 (5.7% less)</li>
</ul>
<p>The $172 difference is "impermanent loss"</p>
</div>
<details>
<summary>When is the risk highest?</summary>
<ul>
<li>When one token changes price significantly vs the other</li>
<li>When you need to withdraw during price volatility</li>
<li>With volatile token pairs (ETH/altcoin)</li>
</ul>
</details>
</div>
</ImpermanentLossExplainer>
<LiquidationRiskExplainer position={position}>
<h3>Liquidation Risk</h3>
<div className="risk-explanation">
<p>
Your position can be liquidated if the value of your collateral
falls below the required level.
</p>
<dl className="current-status">
<dt>Your collateral:</dt>
<dd>${position.collateralValue}</dd>
<dt>Your debt:</dt>
<dd>${position.debtValue}</dd>
<dt>Health factor:</dt>
<dd className={position.healthFactor < 1.5 ? 'warning' : ''}>
{position.healthFactor.toFixed(2)}
{position.healthFactor < 1.5 && ' (At risk!)'}
</dd>
<dt>Liquidation price:</dt>
<dd>
If {position.collateralToken} falls to ${position.liquidationPrice},
your position will be liquidated.
</dd>
</dl>
<div role="alert" className={position.healthFactor < 1.2 ? 'danger' : ''}>
{position.healthFactor < 1.2 ? (
<p>
<strong>⚠️ High liquidation risk!</strong>
Consider adding collateral or repaying debt.
</p>
) : position.healthFactor < 1.5 ? (
<p>
<strong>⚠️ Moderate risk.</strong>
Monitor your position closely.
</p>
) : (
<p>Your position is currently safe, but market conditions can change.</p>
)}
</div>
</div>
</LiquidationRiskExplainer>
```
**Failures**:
- No explanation of DeFi-specific risks
- Technical jargon without definitions
- No concrete examples
---
### 3.4.3 Multi-Format Risk Assessments (Level AAA)
**Requirement**: Risk assessments are provided in multiple formats: text summaries, numerical scores, visual indicators, and optional audio.
**Intent**: Different users process information differently. Multiple formats ensure comprehension.
**Benefits**:
- **Blind users**: Audio risk announcements
- **Cognitive disabilities**: Visual risk meters
- **All users**: Preferred format access
**Techniques**:
```tsx
<RiskAssessment risk={overallRisk}>
{/* Text summary */}
<div className="risk-text">
<h3>Risk Assessment: {risk.level}</h3>
<p>{risk.summary}</p>
</div>
{/* Numerical score */}
<div className="risk-score" aria-label={`Risk score: ${risk.score} out of 100`}>
<span className="score">{risk.score}</span>
<span className="max">/100</span>
</div>
{/* Visual meter */}
<div
role="meter"
aria-valuenow={risk.score}
aria-valuemin={0}
aria-valuemax={100}
aria-label="Risk level meter"
className="risk-meter"
>
<div
className="meter-fill"
style={{ width: `${risk.score}%` }}
aria-hidden="true"
/>
</div>
{/* Audio option */}
{settings.audioAnnouncements && (
<button onClick={() => speakRiskAssessment(risk)}>
<SpeakerIcon aria-hidden="true" />
Hear risk assessment
</button>
)}
{/* Detailed breakdown */}
<details>
<summary>Risk factors breakdown</summary>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Rating</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
{risk.factors.map(factor => (
<tr key={factor.name}>
<td>{factor.name}</td>
<td>{factor.rating}</td>
<td>{factor.weight}%</td>
</tr>
))}
</tbody>
</table>
</details>
</RiskAssessment>
```
**Failures**:
- Single format only
- Risk score without explanation
- No accessible alternatives
---
## Testing Checklist
- [ ] Unverified contracts are flagged
- [ ] Warning requires acknowledgment
- [ ] Impermanent loss is explained
- [ ] Liquidation risk is clear
- [ ] Concrete examples provided
- [ ] Risk in multiple formats
- [ ] Screen reader can access all risk info
- [ ] Audio option available
## Related Components
- [ContractVerification.tsx](../../components/ContractVerification.tsx)
- [RiskExplainer.tsx](../../components/RiskExplainer.tsx)
- [RiskMeter.tsx](../../components/RiskMeter.tsx)
